redesign email template

emails/assets/css/style.css

@@ -84,6 +84,10 @@ margin-top:25px;
 margin-bottom: 25px;
 }
 
+.data {
+  font-size: 16px;
+}
+
 .footer {
   background-color: #2e2e2e;
   color: #999999;
@@ -138,6 +142,45 @@ table.columns td.better-button {
   color: #FFFFFF !important;
 }
 
+table.better-button-alt {
+  margin-top: 10px;
+  margin-bottom: 20px;
+}
+
+table.columns td.better-button-alt {
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  padding-bottom: 0px;
+}
+
+.better-button-alt a {
+  text-decoration: none;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+
+  padding: 12px 25px;
+  border: 1px solid #ff8f2b;
+  background-color: #EFEFEF;
+  display: inline-block;
+  color: #ff8f2b;
+}
+
+.better-button-alt:hover a {
+  color: #ff8f2b !important;
+  background-color: #DDDDDD;
+  border: 1px solid #F2821E;
+}
+
+.better-button-alt:visited a {
+  color: #ff8f2b !important;
+}
+
+.better-button-alt:active a {
+  color: #ff8f2b !important;
+}
+
 .verification-code {
   background-color: #EEEEEE;
   padding: 3px;

emails/templates/alert_notification.html

@@ -16,7 +16,7 @@
 
 <table class="row" >
 	<tr>
-        <td class="wrapper last">
+        <td class="last">
 			<table class="twelve columns">
 				<tr>
                     <td class="center">
@@ -31,24 +31,24 @@
 [[if ne .State "ok" ]]
 <table class="row" >
 	<tr>
-        <td class="wrapper last">
+        <td class="last">
 			<center>
 			<table class="twelve columns" >
 				<tr>
-					<td class="wrapper last" style="font-weight: bold;">
-						Metric name
+					<td class="six last">
+						<h5 style="font-weight: bold;">Metric name</h5>
 					</td>
-					<td style="font-weight: bold;">
-						Value
+					<td class="six">
+						<h5 style="font-weight: bold;">Value</h5>
 					</td>
 				</tr>
-				[[range .EvalMatches]] dwds
+				[[range .EvalMatches]]
 				<tr>
-					<td class="wrapper last">
-						[[.Metric]]
+					<td class="six last">
+						<h5 class="data">[[.Metric]]</h5>
 					</td>
-					<td>
-						[[.Value]]
+					<td class="six">
+						<h5 class="data">[[.Value]]</h5>
 					</td>
 				</tr>
 				[[end]]
@@ -79,8 +79,23 @@
 		<td class="wrapper last">
 			<table class="twelve columns">
 				<tr>
-					<td class="center">
-						<a href="[[.RuleUrl]]"  target="_blank">Alert rule</a> - <a href="[[.AlertPageUrl]]"  target="_blank">Alerts page</a>
+					<td class="center six">
+						<table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0">
+							<tr>
+								<td align="center" class="better-button" bgcolor="#ff8f2b">
+									<a href="[[.RuleUrl]]"  target="_blank">View your Alert rule</a>
+								</td>
+							</tr>
+						</table>
+						</td>
+						<td class="center six">
+						<table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0">
+							<tr>
+								<td align="center" class="better-button-alt" bgcolor="#efefef">
+									<a href="[[.AlertPageUrl]]"  target="_blank"> Go to the Alerts page</a>
+								</td>
+							</tr>
+						</table>
 					</td>
 				</tr>
 			</table>

emails/templates/alert_notification_example.html

@@ -0,0 +1,115 @@
+<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">
+						<h3 style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; /*text-align: center*/; color: #D63232; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 22px; font-weight: bold; font-style: italic; line-height: 1.3; margin: 20px 0 0; padding: 0; text-align: left; word-break: normal" align="left"><img src="http://play.grafana.org/img/critical.svg" style="width: 40px; margin-right: 10px;"/> [CRITICAL] Imaginary timeserie alert</h3>
+					</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">
+                        <p style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; /*text-align: center*/; 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: left" align="left">Alert message that will support markdown in some distant future.</p>
+					</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="column 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">
+			<center style="min-width: 580px; width: 100%">
+			
+			<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 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: 18px; font-weight: bold; line-height: 1.3; margin: 0; padding: 0; word-break: normal;" align="left" valign="top">
+						Metric name
+					</td>
+					<td class="six" 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: 18px; font-weight: bold; line-height: 1.3; margin: 0; padding: 0; word-break: normal;" align="left" valign="top">
+						Value
+					</td>
+				</tr>
+				
+				<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
+					<td class="six 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: 16px; font-weight: normal; line-height: 1.5; margin: 0; padding: 0; word-break: normal;" align="left" valign="top">
+						desktop
+					</td>
+					<td class="six" 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: 16px; font-weight: normal; line-height: 1.5; margin: 0; padding: 0; word-break: normal;" align="left" valign="top">
+						40
+					</td>
+				</tr>
+				
+				<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
+					<td class="six 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: 16px; font-weight: normal; line-height: 1.5; margin: 0; padding: 0; word-break: normal;" align="left" valign="top">
+						mobile
+					</td>
+					<td class="six" 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: 16px; font-weight: normal; line-height: 1.5; margin: 0; padding: 0; word-break: normal;" align="left" valign="top">
+						20
+					</td>
+				</tr>
+				
+			</table>
+			</center>
+		</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">
+	                    <img src="http://play.grafana.org/render/dashboard-solo/db/graphite-carbon-metrics?panelId=2&amp;from=1472149131057&amp;to=1472159931058&amp;width=1000&amp;height=500" style="-ms-interpolation-mode: bicubic; clear: both; display: block; float: left; max-width: 100%; outline: none; text-decoration: none; width: auto" align="left" />
+					</td>
+				</tr>
+			</table>
+		</td>
+	</tr>
+</table>
+
+
+<table class="row">
+	<tr>
+		<td class="wrapper last">
+			<table class="twelve columns">
+				<tr>
+					<td class="center six">
+						<table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0">
+							<tr>
+								<td align="center" class="better-button" bgcolor="#ff8f2b">
+									<a href="[[.RuleUrl]]"  target="_blank">View your Alert rule</a>
+								</td>
+							</tr>
+						</table>
+						</td>
+						<td class="center six">
+						<table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0">
+							<tr>
+								<td align="center" class="better-button-alt" bgcolor="#efefef">
+									<a href="[[.AlertPageUrl]]"  target="_blank"> Go to the Alerts page</a>
+								</td>
+							</tr>
+						</table>
+					</td>
+				</tr>
+			</table>
+		</td>
+	</tr>
+</table>
+
+
+							

emails/templates/invited_to_org.html

@@ -9,7 +9,7 @@
 			<table class="twelve columns">
 				<tr>
 					<td>
-						<h3>You have been added to [[.OrgName]]</h3>
+						<h4 class="center">You have been added to [[.OrgName]]</h4>
 					</td>
 					<td class="expander"></td>
 				</tr>
@@ -25,7 +25,7 @@
 			<table class="twelve columns">
 				<tr>
 					<td class="center">
-						<p><span class="emphasis">[[.InvitedBy]]</span> has added you to the <span class="emphasis">[[.OrgName]]</span> organization in Grafana.
+						<p><b>[[.InvitedBy]]</b> has added you to the <b>[[.OrgName]]</b> organization in Grafana.
 						<p>Once logged in, [[.OrgName]] will be available in the left side menu, in the dropdown below your username.</p>
 					</td>
 					<td class="expander"></td>

emails/templates/layouts/default.html

@@ -10,25 +10,25 @@
 </head>
 <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="main" style="background: #2e2e2e; height: 100% !important; margin: 0 auto; padding: 0; width: 100% !important" bgcolor="#2e2e2e"><style type="text/css">
 body {
-height: 100% !important; width: 100% !important;
+	height: 100% !important; width: 100% !important;
 }
 body .copy {
--ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
+   -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
 }
 .ExternalClass {
-width: 100%;
+	width: 100%;
 }
 .ExternalClass {
-line-height: 100%;
+	line-height: 100%;
 }
 img {
--ms-interpolation-mode: bicubic;
+    -ms-interpolation-mode: bicubic;
 }
 img {
-border: 0 !important; outline: none !important; text-decoration: none !important;
+	border: 0 !important; outline: none !important; text-decoration: none !important;
 }
 a:hover {
-text-decoration: underline;
+	text-decoration: underline;
 }
 td[class="stack-column-center"] {
     text-align: center !important;
@@ -46,12 +46,6 @@ td[class="stack-column-center"] {
   img[class="fluid-centered"] {
     margin: auto !important;
   }
-  table[class="articles"] {
-    width: 90% !important;
-  }
-  table[class="article-links"] {
-    width: 100% !important;
-  }
   td[class="comms-content"] {
     padding: 20px !important;
   }
@@ -91,41 +85,8 @@ td[class="stack-column-center"] {
   td[class="spacer mb-shorten"] {
     height: 25px !important;
   }
-  a[class="footer-legal-links"] {
-    display: block !important; margin-bottom: 6px !important; font-size: 12px !important; line-height: 18px !important;
-  }
-  td[class="footer-links-list"] {
-    margin: 12px 0;
-  }
-  a[class="post-title"] {
-    font-size: 22px !important; line-height: 32px !important;
-  }
-  a[class="post-title spotlight"] {
-    font-size: 22px !important; line-height: 32px !important;
-  }
-  td[class="legal-text"] {
-    font-size: 12px !important; line-height: 18px !important;
-  }
-  td[class="avatar"] {
-    width: 30% !important;
-  }
-  td[class="links"] {
-    width: 30% !important;
-  }
-  td[class="links"] {
-    width: 70% !important;
-  }
-  a[class="main-cta"] {
-    width: 90% !important; font-size: 18px !important;
-  }
-  table[class="button"] {
-    width: 90% !important; font-size: 18px !important;
-  }
-  a[class="cta-big-link"] {
-    font-size: 18px !important; line-height: 26px !important;
-  }
-  a[class="btn-white"] {
-    font-size: 13px !important; width: 90px !important;
+  .two-up td {
+  	width:270px;
   }
 }
 </style>
@@ -174,14 +135,14 @@ td[class="stack-column-center"] {
 						</tr>
 					</table>
 					<!-- footer -->
-					<table class="row footer">
+					<table class="footer center">
 						<tr>
 							<td class="wrapper last">
-								<table class="twelve columns">
+								<table class="twelve columns center">
 									<tr>
-										<td align="center">
+										<td class="twelve" align="center">
 											<center>
-												<p style="text-align:center; font-size: 12px; color: #999999;">
+												<p style="text-align: center; font-size: 12px; color: #999999;">
 													Sent by <a href="[[.AppUrl]]">Grafana v[[.BuildVersion]]</a>
 													<br />&copy; 2016 Grafana and raintank
 												</p>

emails/templates/new_user_invite.html

@@ -9,7 +9,7 @@
 			<table class="twelve columns">
 				<tr>
 					<td>
-						<h3>You're invited to join [[.OrgName]]</h3>
+						<h4 class="center">You're invited to join [[.OrgName]]</h4>
 					</td>
 					<td class="expander"></td>
 				</tr>
@@ -25,7 +25,7 @@
 			<table class="twelve columns">
 				<tr>
 					<td class="center">
-						<p>You've been invited to join the <span class="emphasis">[[.OrgName]]</span> organization by <span class="emphasis">[[.InvitedBy]]</span>. To accept your invitation and join the team, please click the link below:</p>
+						<p>You've been invited to join the <b>[[.OrgName]]</b> organization by <b>[[.InvitedBy]]</b>. To accept your invitation and join the team, please click the link below:</p>
 					</td>
 				</tr>
 				<tr>				

emails/templates/reset_password.html

@@ -7,7 +7,7 @@
 			<table class="twelve columns">
 				<tr>
 					<td>
-						<h3>Hi [[.Name]]</h3>
+						<h4>Hi [[.Name]],</h4>
 					</td>
 					<td class="expander"></td>
 				</tr>
@@ -24,7 +24,7 @@
 				<tr>
 					<td class="center">
 						<p>
-							Please click the following link to reset your password within <strong>[[.EmailCodeValidHours]] hours</strong>.
+							Please click the following link to reset your password within <b>[[.EmailCodeValidHours]] hours</b>.
 						</p>
 						<p>
 							<a href="[[.AppUrl]]user/password/reset?code=[[.Code]]">[[.AppUrl]]user/password/reset?code=[[.Code]]</a>

emails/templates/signup_started.html

@@ -7,7 +7,7 @@
 			<table class="twelve columns">
 				<tr>
 					<td>
-						<h3 class="center">Complete the signup</h3>
+						<h4 class="center">Complete the signup</h4>
 					</td>
 					<td class="expander"></td>
 				</tr>

emails/templates/welcome_on_signup.html

@@ -7,10 +7,15 @@
 			<table class="twelve columns">
 				<tr>
 					<td>
-						<h3>Hi [[.Name]]</h3>
+						<h4>Hi [[.Name]],</h4>
 					</td>
 					<td class="expander"></td>
 				</tr>
+				<tr>
+					<td>
+						Welcome! Ready to start building some beautiful metric and analytic dashboards?
+					</td>
+				</tr>
 			</table>
 
 		</td>
@@ -29,6 +34,13 @@
 					</td>
 					<td class="expander"></td>
 				</tr>
+				<tr>
+					<td>
+						Thank you for joining our community.
+						<br />
+						<p>The Grafana Team</p>
+					</td>
+				</tr>
 			</table>
 		</td>
 	</tr>

public/emails/alert_notification.html

@@ -48,6 +48,15 @@ color: #FFFFFF !important;
 .better-button:active a {
 color: #FFFFFF !important;
 }
+.better-button-alt:hover a {
+color: #ff8f2b !important; background-color: #DDDDDD; border: 1px solid #F2821E;
+}
+.better-button-alt:visited a {
+color: #ff8f2b !important;
+}
+.better-button-alt:active a {
+color: #ff8f2b !important;
+}
 body {
 height: 100% !important; width: 100% !important;
 }
@@ -88,12 +97,21 @@ text-decoration: underline;
   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"] .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"] table.columns td {
     width: 100% !important;
   }
   table[class="body"] .columns td.six {
     width: 50% !important;
   }
+  table[class="body"] .column td.six {
+    width: 50% !important;
+  }
+  table[class="body"] .columns td.twelve {
+    width: 100% !important;
+  }
   table[class="body"] table.columns td.expander {
     width: 1px !important;
   }
@@ -111,12 +129,6 @@ text-decoration: underline;
   img[class="fluid-centered"] {
     margin: auto !important;
   }
-  table[class="articles"] {
-    width: 90% !important;
-  }
-  table[class="article-links"] {
-    width: 100% !important;
-  }
   td[class="comms-content"] {
     padding: 20px !important;
   }
@@ -156,41 +168,8 @@ text-decoration: underline;
   td[class="spacer mb-shorten"] {
     height: 25px !important;
   }
-  a[class="footer-legal-links"] {
-    display: block !important; margin-bottom: 6px !important; font-size: 12px !important; line-height: 18px !important;
-  }
-  td[class="footer-links-list"] {
-    margin: 12px 0;
-  }
-  a[class="post-title"] {
-    font-size: 22px !important; line-height: 32px !important;
-  }
-  a[class="post-title spotlight"] {
-    font-size: 22px !important; line-height: 32px !important;
-  }
-  td[class="legal-text"] {
-    font-size: 12px !important; line-height: 18px !important;
-  }
-  td[class="avatar"] {
-    width: 30% !important;
-  }
-  td[class="links"] {
-    width: 30% !important;
-  }
-  td[class="links"] {
-    width: 70% !important;
-  }
-  a[class="main-cta"] {
-    width: 90% !important; font-size: 18px !important;
-  }
-  table[class="button"] {
-    width: 90% !important; font-size: 18px !important;
-  }
-  a[class="cta-big-link"] {
-    font-size: 18px !important; line-height: 26px !important;
-  }
-  a[class="btn-white"] {
-    font-size: 13px !important; width: 90px !important;
+  .two-up td {
+    width: 270px;
   }
 }
 </style>
@@ -251,7 +230,7 @@ text-decoration: underline;
 
 <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; 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; word-break: break-word;" align="left" valign="top">
+        <td class="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: 0 0px 0 0; 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; 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; word-break: break-word;" align="center" valign="top">
@@ -266,24 +245,24 @@ text-decoration: underline;
 {{if ne .State "ok" }}
 <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; 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; word-break: break-word;" align="left" valign="top">
+        <td class="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: 0 0px 0 0; word-break: break-word;" align="left" valign="top">
 			<center style="min-width: 580px; width: 100%;">
 			<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; 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: bold; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; position: relative; word-break: break-word;" align="left" valign="top">
-						Metric name
+					<td class="six 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: 0px 0px 10px; width: 50%; word-break: break-word;" align="left" valign="top">
+						<h5 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: 18px; font-weight: bold; line-height: 1.3; margin: 0; padding: 0; word-break: normal;" align="left">Metric name</h5>
 					</td>
-					<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: bold; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; word-break: break-word;" align="left" valign="top">
-						Value
+					<td class="six" 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; width: 50%; word-break: break-word;" align="left" valign="top">
+						<h5 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: 18px; font-weight: bold; line-height: 1.3; margin: 0; padding: 0; word-break: normal;" align="left">Value</h5>
 					</td>
 				</tr>
-				{{range .EvalMatches}} dwds
+				{{range .EvalMatches}}
 				<tr style="padding: 0; 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: 0px 0px 10px; position: relative; word-break: break-word;" align="left" valign="top">
-						{{.Metric}}
+					<td class="six 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: 0px 0px 10px; width: 50%; word-break: break-word;" align="left" valign="top">
+						<h5 class="data" 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: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; word-break: normal;" align="left">{{.Metric}}</h5>
 					</td>
-					<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; word-break: break-word;" align="left" valign="top">
-						{{.Value}}
+					<td class="six" 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; width: 50%; word-break: break-word;" align="left" valign="top">
+						<h5 class="data" 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: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; word-break: normal;" align="left">{{.Value}}</h5>
 					</td>
 				</tr>
 				{{end}}
@@ -314,8 +293,23 @@ text-decoration: underline;
 		<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; 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; 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; word-break: break-word;" align="center" valign="top">
-						<a href="{{.RuleUrl}}" target="_blank" style="color: #E67612; text-decoration: none;">Alert rule</a> - <a href="{{.AlertPageUrl}}" target="_blank" style="color: #E67612; text-decoration: none;">Alerts page</a>
+					<td class="center six" 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; width: 50%; word-break: break-word;" align="center" valign="top">
+						<table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border-spacing: 0; margin-bottom: 20px; margin-top: 10px; padding: 0; text-align: left; vertical-align: top;">
+							<tr style="padding: 0; vertical-align: top;" align="left">
+								<td align="center" class="better-button" bgcolor="#ff8f2b" style="-moz-border-radius: 2px; -moz-hyphens: auto; -webkit-border-radius: 2px; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; border-radius: 2px; 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; word-break: break-word;" valign="top">
+									<a href="{{.RuleUrl}}" target="_blank" style="-moz-border-radius: 2px; -webkit-border-radius: 2px; border: 1px solid #ff8f2b; border-radius: 2px; color: #FFF; display: inline-block; padding: 12px 25px; text-decoration: none;">View your Alert rule</a>
+								</td>
+							</tr>
+						</table>
+						</td>
+						<td class="center six" 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; width: 50%; word-break: break-word;" align="center" valign="top">
+						<table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border-spacing: 0; margin-bottom: 20px; margin-top: 10px; padding: 0; text-align: left; vertical-align: top;">
+							<tr style="padding: 0; vertical-align: top;" align="left">
+								<td align="center" class="better-button-alt" bgcolor="#efefef" style="-moz-border-radius: 2px; -moz-hyphens: auto; -webkit-border-radius: 2px; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; border-radius: 2px; 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; word-break: break-word;" valign="top">
+									<a href="{{.AlertPageUrl}}" target="_blank" style="-moz-border-radius: 2px; -webkit-border-radius: 2px; background: #EFEFEF; border: 1px solid #ff8f2b; border-radius: 2px; color: #ff8f2b; display: inline-block; padding: 12px 25px; text-decoration: none;"> Go to the Alerts page</a>
+								</td>
+							</tr>
+						</table>
 					</td>
 				</tr>
 			</table>
@@ -330,12 +324,12 @@ text-decoration: underline;
 						</tr>
 					</table>
 					
-					<table class="row footer" style="border-collapse: collapse; border-spacing: 0; color: #999999; margin-top: 20px; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%;" bgcolor="#2e2e2e">
+					<table class="footer center" style="border-collapse: collapse; border-spacing: 0; color: #999999; margin-top: 20px; padding: 0; text-align: center; vertical-align: top;" bgcolor="#2e2e2e">
 						<tr style="padding: 0; 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; 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;">
+							<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 20px 0px 0px; position: relative; word-break: break-word;" align="left" valign="top">
+								<table class="twelve columns center" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 580px;">
 									<tr style="padding: 0; 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; word-break: break-word;" valign="top">
+										<td class="twelve" 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; width: 100%; 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: #999999; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0;" align="center">
 													Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none;">Grafana v{{.BuildVersion}}</a>

public/emails/alert_notification_example.html

@@ -0,0 +1,359 @@
+<!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" 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" />
+	
+</head>
+<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="main" 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; height: 100% !important; line-height: 19px; margin: 0 auto; min-width: 100%; padding: 0; text-align: left; width: 100% !important;" bgcolor="#2e2e2e"><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;
+}
+body {
+color: #222222; font-family: "Helvetica", "Arial", sans-serif; font-weight: normal; padding: 0; margin: 0; text-align: left; line-height: 1.3;
+}
+body {
+font-size: 14px; line-height: 19px;
+}
+a:hover {
+color: #2795b6 !important;
+}
+a:active {
+color: #2795b6 !important;
+}
+a:visited {
+color: #2ba6cb !important;
+}
+body {
+font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;
+}
+a:hover {
+color: #ff8f2b !important;
+}
+a:active {
+color: #F2821E !important;
+}
+a:visited {
+color: #E67612 !important;
+}
+.better-button:hover a {
+color: #FFFFFF !important; background-color: #F2821E; border: 1px solid #F2821E;
+}
+.better-button:visited a {
+color: #FFFFFF !important;
+}
+.better-button:active a {
+color: #FFFFFF !important;
+}
+.better-button-alt:hover a {
+color: #ff8f2b !important; background-color: #DDDDDD; border: 1px solid #F2821E;
+}
+.better-button-alt:visited a {
+color: #ff8f2b !important;
+}
+.better-button-alt:active a {
+color: #ff8f2b !important;
+}
+body {
+height: 100% !important; width: 100% !important;
+}
+body .copy {
+-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
+}
+.ExternalClass {
+width: 100%;
+}
+.ExternalClass {
+line-height: 100%;
+}
+img {
+-ms-interpolation-mode: bicubic;
+}
+img {
+border: 0 !important; outline: none !important; text-decoration: none !important;
+}
+a:hover {
+text-decoration: underline;
+}
+@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-layout: fixed !important; float: none !important; width: 100% !important; padding-right: 0px !important; padding-left: 0px !important; display: block !important;
+  }
+  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"] table.columns td {
+    width: 100% !important;
+  }
+  table[class="body"] .columns td.six {
+    width: 50% !important;
+  }
+  table[class="body"] .column td.six {
+    width: 50% !important;
+  }
+  table[class="body"] .columns td.twelve {
+    width: 100% !important;
+  }
+  table[class="body"] table.columns td.expander {
+    width: 1px !important;
+  }
+}
+@media (max-width: 600px) {
+  table[class="email-container"] {
+    width: 95% !important;
+  }
+  img[class="fluid"] {
+    width: 100% !important; max-width: 100% !important; height: auto !important; margin: auto !important;
+  }
+  img[class="fluid-centered"] {
+    width: 100% !important; max-width: 100% !important; height: auto !important; margin: auto !important;
+  }
+  img[class="fluid-centered"] {
+    margin: auto !important;
+  }
+  td[class="comms-content"] {
+    padding: 20px !important;
+  }
+  td[class="stack-column"] {
+    display: block !important; width: 100% !important; direction: ltr !important;
+  }
+  td[class="stack-column-center"] {
+    display: block !important; width: 100% !important; direction: ltr !important;
+  }
+  td[class="stack-column-center"] {
+    text-align: center !important;
+  }
+  td[class="copy"] {
+    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
+  }
+  td[class="copy -center"] {
+    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
+  }
+  td[class="copy -bold"] {
+    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
+  }
+  td[class="small-text"] {
+    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
+  }
+  td[class="mini-centered-text"] {
+    font-size: 14px !important; line-height: 24px !important; padding: 15px 30px !important;
+  }
+  td[class="copy -padd"] {
+    padding: 0 40px !important;
+  }
+  span[class="sep"] {
+    display: none !important;
+  }
+  td[class="mb-hide"] {
+    display: none !important; height: 0 !important;
+  }
+  td[class="spacer mb-shorten"] {
+    height: 25px !important;
+  }
+  .two-up td {
+    width: 270px;
+  }
+}
+</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; 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; word-break: break-word;">
+        		<center style="min-width: 580px; width: 100%;">
+					
+					<table class="row header" style="border-collapse: collapse; border-spacing: 0; margin-bottom: 25px; margin-top: 25px; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%;">
+						<tr style="padding: 0; 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; 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; 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; 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; 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; width: 50%; word-break: break-word;" align="center" valign="top">
+											<img src="http://grafana.org/assets/img/logo_new_transparent_200x48.png" style="-ms-interpolation-mode: bicubic; border: 0; clear: both; display: inline; max-width: 100%; outline: none !important; text-decoration: none !important; width: 200px;" align="none" />
+						                </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; visibility: hidden; width: 0px; word-break: break-word;" align="left" valign="top"></td>
+						              </tr>
+						            </table>
+
+						          </td>
+						        </tr>
+						      </table>
+
+						    </center>
+						  </td>
+						</tr>
+					</table>
+
+					<table class="container" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: inherit; vertical-align: top; width: 580px;" width="600" bgcolor="#efefef">
+						<tr style="padding: 0; vertical-align: top;" align="left">
+							<td height="2" class="spacer mb-shorten" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; background: linear-gradient(to right, #ffed00 0%, #f26529 75%); border: 0; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 0; font-weight: normal; height: 2px !important; hyphens: auto; line-height: 0; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; word-break: break-word;" valign="top" align="left"> </td>
+						</tr>
+						<tr style="padding: 0; vertical-align: top;" align="left">
+							<td class="mini-centered-text" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #343b41; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif; hyphens: auto; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 75px; word-break: break-word;" align="center" valign="top">
+								<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; 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; 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; 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; word-break: break-word;" align="center" valign="top">
+						<h3 style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; /*text-align: center*/; color: #D63232; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 22px; font-style: italic; font-weight: bold; line-height: 1.3; margin: 20px 0 0; padding: 0; word-break: normal;" align="left"><img src="http://play.grafana.org/img/critical.svg" style="-ms-interpolation-mode: bicubic; border: 0; clear: both; display: block; margin-right: 10px; max-width: 100%; outline: none !important; text-decoration: none !important; width: 40px;" align="left" /> [CRITICAL] Imaginary timeserie alert</h3>
+					</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; 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; 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; 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; word-break: break-word;" align="center" valign="top">
+                        <p style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; /*text-align: center*/; 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;" align="left">Alert message that will support markdown in some distant future.</p>
+					</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; vertical-align: top;" align="left">
+        <td class="column 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; word-break: break-word;" align="left" valign="top">
+			<center style="min-width: 580px; width: 100%;">
+			
+			<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; vertical-align: top;" align="left">
+					<td class="six 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: 18px; font-weight: bold; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; width: 50%; word-break: normal;" align="left" valign="top">
+						Metric name
+					</td>
+					<td class="six" 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: 18px; font-weight: bold; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; width: 50%; word-break: normal;" align="left" valign="top">
+						Value
+					</td>
+				</tr>
+				
+				<tr style="padding: 0; vertical-align: top;" align="left">
+					<td class="six 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: 16px; font-weight: normal; hyphens: auto; line-height: 1.5; margin: 0; padding: 0; width: 50%; word-break: normal;" align="left" valign="top">
+						desktop
+					</td>
+					<td class="six" 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: 16px; font-weight: normal; hyphens: auto; line-height: 1.5; margin: 0; padding: 0; width: 50%; word-break: normal;" align="left" valign="top">
+						40
+					</td>
+				</tr>
+				
+				<tr style="padding: 0; vertical-align: top;" align="left">
+					<td class="six 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: 16px; font-weight: normal; hyphens: auto; line-height: 1.5; margin: 0; padding: 0; width: 50%; word-break: normal;" align="left" valign="top">
+						mobile
+					</td>
+					<td class="six" 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: 16px; font-weight: normal; hyphens: auto; line-height: 1.5; margin: 0; padding: 0; width: 50%; word-break: normal;" align="left" valign="top">
+						20
+					</td>
+				</tr>
+				
+			</table>
+			</center>
+		</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; 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; 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; 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; word-break: break-word;" align="center" valign="top">
+	                    <img src="http://play.grafana.org/render/dashboard-solo/db/graphite-carbon-metrics?panelId=2&amp;from=1472149131057&amp;to=1472159931058&amp;width=1000&amp;height=500" style="-ms-interpolation-mode: bicubic; border: 0; clear: both; display: block; max-width: 100%; outline: none !important; text-decoration: none !important; width: auto;" align="left" />
+					</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; 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; 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; vertical-align: top;" align="left">
+					<td class="center six" 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; width: 50%; word-break: break-word;" align="center" valign="top">
+						<table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border-spacing: 0; margin-bottom: 20px; margin-top: 10px; padding: 0; text-align: left; vertical-align: top;">
+							<tr style="padding: 0; vertical-align: top;" align="left">
+								<td align="center" class="better-button" bgcolor="#ff8f2b" style="-moz-border-radius: 2px; -moz-hyphens: auto; -webkit-border-radius: 2px; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; border-radius: 2px; 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; word-break: break-word;" valign="top">
+									<a href="{{.RuleUrl}}" target="_blank" style="-moz-border-radius: 2px; -webkit-border-radius: 2px; border: 1px solid #ff8f2b; border-radius: 2px; color: #FFF; display: inline-block; padding: 12px 25px; text-decoration: none;">View your Alert rule</a>
+								</td>
+							</tr>
+						</table>
+						</td>
+						<td class="center six" 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; width: 50%; word-break: break-word;" align="center" valign="top">
+						<table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border-spacing: 0; margin-bottom: 20px; margin-top: 10px; padding: 0; text-align: left; vertical-align: top;">
+							<tr style="padding: 0; vertical-align: top;" align="left">
+								<td align="center" class="better-button-alt" bgcolor="#efefef" style="-moz-border-radius: 2px; -moz-hyphens: auto; -webkit-border-radius: 2px; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; border-radius: 2px; 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; word-break: break-word;" valign="top">
+									<a href="{{.AlertPageUrl}}" target="_blank" style="-moz-border-radius: 2px; -webkit-border-radius: 2px; background: #EFEFEF; border: 1px solid #ff8f2b; border-radius: 2px; color: #ff8f2b; display: inline-block; padding: 12px 25px; text-decoration: none;"> Go to the Alerts page</a>
+								</td>
+							</tr>
+						</table>
+					</td>
+				</tr>
+			</table>
+		</td>
+	</tr>
+</table>
+
+
+							
+								
+							</td>
+						</tr>
+					</table>
+					
+					<table class="footer center" style="border-collapse: collapse; border-spacing: 0; color: #999999; margin-top: 20px; padding: 0; text-align: center; vertical-align: top;" bgcolor="#2e2e2e">
+						<tr style="padding: 0; 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 20px 0px 0px; position: relative; word-break: break-word;" align="left" valign="top">
+								<table class="twelve columns center" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 580px;">
+									<tr style="padding: 0; vertical-align: top;" align="left">
+										<td class="twelve" 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; width: 100%; 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: #999999; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0;" align="center">
+													Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none;">Grafana v{{.BuildVersion}}</a>
+													<br />© 2016 Grafana and raintank
+												</p>
+											</center>
+										</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; visibility: hidden; width: 0px; word-break: break-word;" align="left" valign="top"></td>
+									</tr>
+								</table>
+							</td>
+						</tr>
+					</table>
+				</center>
+			</td>
+		</tr>
+	</table>
+</body>
+</html>

public/emails/invited_to_org.html

@@ -48,6 +48,15 @@ color: #FFFFFF !important;
 .better-button:active a {
 color: #FFFFFF !important;
 }
+.better-button-alt:hover a {
+color: #ff8f2b !important; background-color: #DDDDDD; border: 1px solid #F2821E;
+}
+.better-button-alt:visited a {
+color: #ff8f2b !important;
+}
+.better-button-alt:active a {
+color: #ff8f2b !important;
+}
 body {
 height: 100% !important; width: 100% !important;
 }
@@ -88,12 +97,21 @@ text-decoration: underline;
   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"] .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"] table.columns td {
     width: 100% !important;
   }
   table[class="body"] .columns td.six {
     width: 50% !important;
   }
+  table[class="body"] .column td.six {
+    width: 50% !important;
+  }
+  table[class="body"] .columns td.twelve {
+    width: 100% !important;
+  }
   table[class="body"] table.columns td.expander {
     width: 1px !important;
   }
@@ -111,12 +129,6 @@ text-decoration: underline;
   img[class="fluid-centered"] {
     margin: auto !important;
   }
-  table[class="articles"] {
-    width: 90% !important;
-  }
-  table[class="article-links"] {
-    width: 100% !important;
-  }
   td[class="comms-content"] {
     padding: 20px !important;
   }
@@ -156,41 +168,8 @@ text-decoration: underline;
   td[class="spacer mb-shorten"] {
     height: 25px !important;
   }
-  a[class="footer-legal-links"] {
-    display: block !important; margin-bottom: 6px !important; font-size: 12px !important; line-height: 18px !important;
-  }
-  td[class="footer-links-list"] {
-    margin: 12px 0;
-  }
-  a[class="post-title"] {
-    font-size: 22px !important; line-height: 32px !important;
-  }
-  a[class="post-title spotlight"] {
-    font-size: 22px !important; line-height: 32px !important;
-  }
-  td[class="legal-text"] {
-    font-size: 12px !important; line-height: 18px !important;
-  }
-  td[class="avatar"] {
-    width: 30% !important;
-  }
-  td[class="links"] {
-    width: 30% !important;
-  }
-  td[class="links"] {
-    width: 70% !important;
-  }
-  a[class="main-cta"] {
-    width: 90% !important; font-size: 18px !important;
-  }
-  table[class="button"] {
-    width: 90% !important; font-size: 18px !important;
-  }
-  a[class="cta-big-link"] {
-    font-size: 18px !important; line-height: 26px !important;
-  }
-  a[class="btn-white"] {
-    font-size: 13px !important; width: 90px !important;
+  .two-up td {
+    width: 270px;
   }
 }
 </style>
@@ -244,7 +223,7 @@ text-decoration: underline;
 			<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; 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; 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: 22px; font-weight: normal; line-height: 1.3; margin: 10px 0; padding: 0; word-break: normal;" align="left">You have been added to {{.OrgName}}</h3>
+						<h4 class="center" 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: 20px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; word-break: normal;" align="center">You have been added to {{.OrgName}}</h4>
 					</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; visibility: hidden; width: 0px; word-break: break-word;" align="left" valign="top"></td>
 				</tr>
@@ -260,7 +239,7 @@ text-decoration: underline;
 			<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; 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; word-break: break-word;" align="center" valign="top">
-						<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;" align="left"><span class="emphasis" style="font-weight: 600;">{{.InvitedBy}}</span> has added you to the <span class="emphasis" style="font-weight: 600;">{{.OrgName}}</span> organization in Grafana.
+						<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;" align="left"><b>{{.InvitedBy}}</b> has added you to the <b>{{.OrgName}}</b> organization in Grafana.
 						</p><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;" align="left">Once logged in, {{.OrgName}} will be available in the left side menu, in the dropdown below your username.</p>
 					</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; visibility: hidden; width: 0px; word-break: break-word;" align="left" valign="top"></td>
@@ -286,12 +265,12 @@ text-decoration: underline;
 						</tr>
 					</table>
 					
-					<table class="row footer" style="border-collapse: collapse; border-spacing: 0; color: #999999; margin-top: 20px; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%;" bgcolor="#2e2e2e">
+					<table class="footer center" style="border-collapse: collapse; border-spacing: 0; color: #999999; margin-top: 20px; padding: 0; text-align: center; vertical-align: top;" bgcolor="#2e2e2e">
 						<tr style="padding: 0; 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; 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;">
+							<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 20px 0px 0px; position: relative; word-break: break-word;" align="left" valign="top">
+								<table class="twelve columns center" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 580px;">
 									<tr style="padding: 0; 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; word-break: break-word;" valign="top">
+										<td class="twelve" 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; width: 100%; 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: #999999; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0;" align="center">
 													Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none;">Grafana v{{.BuildVersion}}</a>

public/emails/new_user_invite.html

@@ -48,6 +48,15 @@ color: #FFFFFF !important;
 .better-button:active a {
 color: #FFFFFF !important;
 }
+.better-button-alt:hover a {
+color: #ff8f2b !important; background-color: #DDDDDD; border: 1px solid #F2821E;
+}
+.better-button-alt:visited a {
+color: #ff8f2b !important;
+}
+.better-button-alt:active a {
+color: #ff8f2b !important;
+}
 body {
 height: 100% !important; width: 100% !important;
 }
@@ -88,12 +97,21 @@ text-decoration: underline;
   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"] .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"] table.columns td {
     width: 100% !important;
   }
   table[class="body"] .columns td.six {
     width: 50% !important;
   }
+  table[class="body"] .column td.six {
+    width: 50% !important;
+  }
+  table[class="body"] .columns td.twelve {
+    width: 100% !important;
+  }
   table[class="body"] table.columns td.expander {
     width: 1px !important;
   }
@@ -111,12 +129,6 @@ text-decoration: underline;
   img[class="fluid-centered"] {
     margin: auto !important;
   }
-  table[class="articles"] {
-    width: 90% !important;
-  }
-  table[class="article-links"] {
-    width: 100% !important;
-  }
   td[class="comms-content"] {
     padding: 20px !important;
   }
@@ -156,41 +168,8 @@ text-decoration: underline;
   td[class="spacer mb-shorten"] {
     height: 25px !important;
   }
-  a[class="footer-legal-links"] {
-    display: block !important; margin-bottom: 6px !important; font-size: 12px !important; line-height: 18px !important;
-  }
-  td[class="footer-links-list"] {
-    margin: 12px 0;
-  }
-  a[class="post-title"] {
-    font-size: 22px !important; line-height: 32px !important;
-  }
-  a[class="post-title spotlight"] {
-    font-size: 22px !important; line-height: 32px !important;
-  }
-  td[class="legal-text"] {
-    font-size: 12px !important; line-height: 18px !important;
-  }
-  td[class="avatar"] {
-    width: 30% !important;
-  }
-  td[class="links"] {
-    width: 30% !important;
-  }
-  td[class="links"] {
-    width: 70% !important;
-  }
-  a[class="main-cta"] {
-    width: 90% !important; font-size: 18px !important;
-  }
-  table[class="button"] {
-    width: 90% !important; font-size: 18px !important;
-  }
-  a[class="cta-big-link"] {
-    font-size: 18px !important; line-height: 26px !important;
-  }
-  a[class="btn-white"] {
-    font-size: 13px !important; width: 90px !important;
+  .two-up td {
+    width: 270px;
   }
 }
 </style>
@@ -244,7 +223,7 @@ text-decoration: underline;
 			<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; 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; 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: 22px; font-weight: normal; line-height: 1.3; margin: 10px 0; padding: 0; word-break: normal;" align="left">You're invited to join {{.OrgName}}</h3>
+						<h4 class="center" 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: 20px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; word-break: normal;" align="center">You're invited to join {{.OrgName}}</h4>
 					</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; visibility: hidden; width: 0px; word-break: break-word;" align="left" valign="top"></td>
 				</tr>
@@ -260,7 +239,7 @@ text-decoration: underline;
 			<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; 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; word-break: break-word;" align="center" valign="top">
-						<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;" align="left">You've been invited to join the <span class="emphasis" style="font-weight: 600;">{{.OrgName}}</span> organization by <span class="emphasis" style="font-weight: 600;">{{.InvitedBy}}</span>. To accept your invitation and join the team, please click the link below:</p>
+						<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;" align="left">You've been invited to join the <b>{{.OrgName}}</b> organization by <b>{{.InvitedBy}}</b>. To accept your invitation and join the team, please click the link below:</p>
 					</td>
 				</tr>
 				<tr style="padding: 0; vertical-align: top;" align="left">				
@@ -287,12 +266,12 @@ text-decoration: underline;
 						</tr>
 					</table>
 					
-					<table class="row footer" style="border-collapse: collapse; border-spacing: 0; color: #999999; margin-top: 20px; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%;" bgcolor="#2e2e2e">
+					<table class="footer center" style="border-collapse: collapse; border-spacing: 0; color: #999999; margin-top: 20px; padding: 0; text-align: center; vertical-align: top;" bgcolor="#2e2e2e">
 						<tr style="padding: 0; 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; 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;">
+							<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 20px 0px 0px; position: relative; word-break: break-word;" align="left" valign="top">
+								<table class="twelve columns center" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 580px;">
 									<tr style="padding: 0; 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; word-break: break-word;" valign="top">
+										<td class="twelve" 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; width: 100%; 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: #999999; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0;" align="center">
 													Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none;">Grafana v{{.BuildVersion}}</a>

public/emails/reset_password.html

@@ -48,6 +48,15 @@ color: #FFFFFF !important;
 .better-button:active a {
 color: #FFFFFF !important;
 }
+.better-button-alt:hover a {
+color: #ff8f2b !important; background-color: #DDDDDD; border: 1px solid #F2821E;
+}
+.better-button-alt:visited a {
+color: #ff8f2b !important;
+}
+.better-button-alt:active a {
+color: #ff8f2b !important;
+}
 body {
 height: 100% !important; width: 100% !important;
 }
@@ -88,12 +97,21 @@ text-decoration: underline;
   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"] .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"] table.columns td {
     width: 100% !important;
   }
   table[class="body"] .columns td.six {
     width: 50% !important;
   }
+  table[class="body"] .column td.six {
+    width: 50% !important;
+  }
+  table[class="body"] .columns td.twelve {
+    width: 100% !important;
+  }
   table[class="body"] table.columns td.expander {
     width: 1px !important;
   }
@@ -111,12 +129,6 @@ text-decoration: underline;
   img[class="fluid-centered"] {
     margin: auto !important;
   }
-  table[class="articles"] {
-    width: 90% !important;
-  }
-  table[class="article-links"] {
-    width: 100% !important;
-  }
   td[class="comms-content"] {
     padding: 20px !important;
   }
@@ -156,41 +168,8 @@ text-decoration: underline;
   td[class="spacer mb-shorten"] {
     height: 25px !important;
   }
-  a[class="footer-legal-links"] {
-    display: block !important; margin-bottom: 6px !important; font-size: 12px !important; line-height: 18px !important;
-  }
-  td[class="footer-links-list"] {
-    margin: 12px 0;
-  }
-  a[class="post-title"] {
-    font-size: 22px !important; line-height: 32px !important;
-  }
-  a[class="post-title spotlight"] {
-    font-size: 22px !important; line-height: 32px !important;
-  }
-  td[class="legal-text"] {
-    font-size: 12px !important; line-height: 18px !important;
-  }
-  td[class="avatar"] {
-    width: 30% !important;
-  }
-  td[class="links"] {
-    width: 30% !important;
-  }
-  td[class="links"] {
-    width: 70% !important;
-  }
-  a[class="main-cta"] {
-    width: 90% !important; font-size: 18px !important;
-  }
-  table[class="button"] {
-    width: 90% !important; font-size: 18px !important;
-  }
-  a[class="cta-big-link"] {
-    font-size: 18px !important; line-height: 26px !important;
-  }
-  a[class="btn-white"] {
-    font-size: 13px !important; width: 90px !important;
+  .two-up td {
+    width: 270px;
   }
 }
 </style>
@@ -242,7 +221,7 @@ text-decoration: underline;
 			<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; 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; 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: 22px; font-weight: normal; line-height: 1.3; margin: 10px 0; padding: 0; word-break: normal;" align="left">Hi {{.Name}}</h3>
+						<h4 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: 20px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; word-break: normal;" align="left">Hi {{.Name}},</h4>
 					</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; visibility: hidden; width: 0px; word-break: break-word;" align="left" valign="top"></td>
 				</tr>
@@ -259,7 +238,7 @@ text-decoration: underline;
 				<tr style="padding: 0; 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; word-break: break-word;" align="center" valign="top">
 						<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;" align="left">
-							Please click the following link to reset your password within <strong>{{.EmailCodeValidHours}} hours</strong>.
+							Please click the following link to reset your password within <b>{{.EmailCodeValidHours}} hours</b>.
 						</p>
 						<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;" align="left">
 							<a href="{{.AppUrl}}user/password/reset?code={{.Code}}" style="color: #E67612; text-decoration: none;">{{.AppUrl}}user/password/reset?code={{.Code}}</a>
@@ -281,12 +260,12 @@ text-decoration: underline;
 						</tr>
 					</table>
 					
-					<table class="row footer" style="border-collapse: collapse; border-spacing: 0; color: #999999; margin-top: 20px; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%;" bgcolor="#2e2e2e">
+					<table class="footer center" style="border-collapse: collapse; border-spacing: 0; color: #999999; margin-top: 20px; padding: 0; text-align: center; vertical-align: top;" bgcolor="#2e2e2e">
 						<tr style="padding: 0; 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; 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;">
+							<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 20px 0px 0px; position: relative; word-break: break-word;" align="left" valign="top">
+								<table class="twelve columns center" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 580px;">
 									<tr style="padding: 0; 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; word-break: break-word;" valign="top">
+										<td class="twelve" 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; width: 100%; 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: #999999; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0;" align="center">
 													Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none;">Grafana v{{.BuildVersion}}</a>

public/emails/signup_started.html

@@ -48,6 +48,15 @@ color: #FFFFFF !important;
 .better-button:active a {
 color: #FFFFFF !important;
 }
+.better-button-alt:hover a {
+color: #ff8f2b !important; background-color: #DDDDDD; border: 1px solid #F2821E;
+}
+.better-button-alt:visited a {
+color: #ff8f2b !important;
+}
+.better-button-alt:active a {
+color: #ff8f2b !important;
+}
 body {
 height: 100% !important; width: 100% !important;
 }
@@ -88,12 +97,21 @@ text-decoration: underline;
   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"] .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"] table.columns td {
     width: 100% !important;
   }
   table[class="body"] .columns td.six {
     width: 50% !important;
   }
+  table[class="body"] .column td.six {
+    width: 50% !important;
+  }
+  table[class="body"] .columns td.twelve {
+    width: 100% !important;
+  }
   table[class="body"] table.columns td.expander {
     width: 1px !important;
   }
@@ -111,12 +129,6 @@ text-decoration: underline;
   img[class="fluid-centered"] {
     margin: auto !important;
   }
-  table[class="articles"] {
-    width: 90% !important;
-  }
-  table[class="article-links"] {
-    width: 100% !important;
-  }
   td[class="comms-content"] {
     padding: 20px !important;
   }
@@ -156,41 +168,8 @@ text-decoration: underline;
   td[class="spacer mb-shorten"] {
     height: 25px !important;
   }
-  a[class="footer-legal-links"] {
-    display: block !important; margin-bottom: 6px !important; font-size: 12px !important; line-height: 18px !important;
-  }
-  td[class="footer-links-list"] {
-    margin: 12px 0;
-  }
-  a[class="post-title"] {
-    font-size: 22px !important; line-height: 32px !important;
-  }
-  a[class="post-title spotlight"] {
-    font-size: 22px !important; line-height: 32px !important;
-  }
-  td[class="legal-text"] {
-    font-size: 12px !important; line-height: 18px !important;
-  }
-  td[class="avatar"] {
-    width: 30% !important;
-  }
-  td[class="links"] {
-    width: 30% !important;
-  }
-  td[class="links"] {
-    width: 70% !important;
-  }
-  a[class="main-cta"] {
-    width: 90% !important; font-size: 18px !important;
-  }
-  table[class="button"] {
-    width: 90% !important; font-size: 18px !important;
-  }
-  a[class="cta-big-link"] {
-    font-size: 18px !important; line-height: 26px !important;
-  }
-  a[class="btn-white"] {
-    font-size: 13px !important; width: 90px !important;
+  .two-up td {
+    width: 270px;
   }
 }
 </style>
@@ -242,7 +221,7 @@ text-decoration: underline;
 			<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; 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; word-break: break-word;" align="left" valign="top">
-						<h3 class="center" 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: 22px; font-weight: normal; line-height: 1.3; margin: 10px 0; padding: 0; word-break: normal;" align="center">Complete the signup</h3>
+						<h4 class="center" 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: 20px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; word-break: normal;" align="center">Complete the signup</h4>
 					</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; visibility: hidden; width: 0px; word-break: break-word;" align="left" valign="top"></td>
 				</tr>
@@ -285,12 +264,12 @@ text-decoration: underline;
 						</tr>
 					</table>
 					
-					<table class="row footer" style="border-collapse: collapse; border-spacing: 0; color: #999999; margin-top: 20px; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%;" bgcolor="#2e2e2e">
+					<table class="footer center" style="border-collapse: collapse; border-spacing: 0; color: #999999; margin-top: 20px; padding: 0; text-align: center; vertical-align: top;" bgcolor="#2e2e2e">
 						<tr style="padding: 0; 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; 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;">
+							<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 20px 0px 0px; position: relative; word-break: break-word;" align="left" valign="top">
+								<table class="twelve columns center" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 580px;">
 									<tr style="padding: 0; 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; word-break: break-word;" valign="top">
+										<td class="twelve" 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; width: 100%; 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: #999999; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0;" align="center">
 													Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none;">Grafana v{{.BuildVersion}}</a>

public/emails/welcome_on_signup.html

@@ -48,6 +48,15 @@ color: #FFFFFF !important;
 .better-button:active a {
 color: #FFFFFF !important;
 }
+.better-button-alt:hover a {
+color: #ff8f2b !important; background-color: #DDDDDD; border: 1px solid #F2821E;
+}
+.better-button-alt:visited a {
+color: #ff8f2b !important;
+}
+.better-button-alt:active a {
+color: #ff8f2b !important;
+}
 body {
 height: 100% !important; width: 100% !important;
 }
@@ -88,12 +97,21 @@ text-decoration: underline;
   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"] .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"] table.columns td {
     width: 100% !important;
   }
   table[class="body"] .columns td.six {
     width: 50% !important;
   }
+  table[class="body"] .column td.six {
+    width: 50% !important;
+  }
+  table[class="body"] .columns td.twelve {
+    width: 100% !important;
+  }
   table[class="body"] table.columns td.expander {
     width: 1px !important;
   }
@@ -111,12 +129,6 @@ text-decoration: underline;
   img[class="fluid-centered"] {
     margin: auto !important;
   }
-  table[class="articles"] {
-    width: 90% !important;
-  }
-  table[class="article-links"] {
-    width: 100% !important;
-  }
   td[class="comms-content"] {
     padding: 20px !important;
   }
@@ -156,41 +168,8 @@ text-decoration: underline;
   td[class="spacer mb-shorten"] {
     height: 25px !important;
   }
-  a[class="footer-legal-links"] {
-    display: block !important; margin-bottom: 6px !important; font-size: 12px !important; line-height: 18px !important;
-  }
-  td[class="footer-links-list"] {
-    margin: 12px 0;
-  }
-  a[class="post-title"] {
-    font-size: 22px !important; line-height: 32px !important;
-  }
-  a[class="post-title spotlight"] {
-    font-size: 22px !important; line-height: 32px !important;
-  }
-  td[class="legal-text"] {
-    font-size: 12px !important; line-height: 18px !important;
-  }
-  td[class="avatar"] {
-    width: 30% !important;
-  }
-  td[class="links"] {
-    width: 30% !important;
-  }
-  td[class="links"] {
-    width: 70% !important;
-  }
-  a[class="main-cta"] {
-    width: 90% !important; font-size: 18px !important;
-  }
-  table[class="button"] {
-    width: 90% !important; font-size: 18px !important;
-  }
-  a[class="cta-big-link"] {
-    font-size: 18px !important; line-height: 26px !important;
-  }
-  a[class="btn-white"] {
-    font-size: 13px !important; width: 90px !important;
+  .two-up td {
+    width: 270px;
   }
 }
 </style>
@@ -242,10 +221,15 @@ text-decoration: underline;
 			<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; 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; 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: 22px; font-weight: normal; line-height: 1.3; margin: 10px 0; padding: 0; word-break: normal;" align="left">Hi {{.Name}}</h3>
+						<h4 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: 20px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; word-break: normal;" align="left">Hi {{.Name}},</h4>
 					</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; visibility: hidden; width: 0px; word-break: break-word;" align="left" valign="top"></td>
 				</tr>
+				<tr style="padding: 0; 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; word-break: break-word;" align="left" valign="top">
+						Welcome! Ready to start building some beautiful metric and analytic dashboards?
+					</td>
+				</tr>
 			</table>
 
 		</td>
@@ -264,6 +248,13 @@ text-decoration: underline;
 					</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; visibility: hidden; width: 0px; word-break: break-word;" align="left" valign="top"></td>
 				</tr>
+				<tr style="padding: 0; 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; word-break: break-word;" align="left" valign="top">
+						Thank you for joining our community.
+						<br />
+						<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;" align="left">The Grafana Team</p>
+					</td>
+				</tr>
 			</table>
 		</td>
 	</tr>
@@ -276,12 +267,12 @@ text-decoration: underline;
 						</tr>
 					</table>
 					
-					<table class="row footer" style="border-collapse: collapse; border-spacing: 0; color: #999999; margin-top: 20px; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%;" bgcolor="#2e2e2e">
+					<table class="footer center" style="border-collapse: collapse; border-spacing: 0; color: #999999; margin-top: 20px; padding: 0; text-align: center; vertical-align: top;" bgcolor="#2e2e2e">
 						<tr style="padding: 0; 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; 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;">
+							<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 20px 0px 0px; position: relative; word-break: break-word;" align="left" valign="top">
+								<table class="twelve columns center" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 580px;">
 									<tr style="padding: 0; 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; word-break: break-word;" valign="top">
+										<td class="twelve" 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; width: 100%; 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: #999999; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0;" align="center">
 													Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none;">Grafana v{{.BuildVersion}}</a>