Index: ow/mail.py
===================================================================
--- ow/mail.py	(revision 42d775c2e48698445980203230ce3cf40e7631ab)
+++ ow/mail.py	(revision 1829fbf68f08df8a3f7efb4bcd04aa5fdbe66654)
@@ -2,7 +2,9 @@
 
 from pyramid_mailer import get_mailer
-from pyramid_mailer.message import Message
+from pyramid_mailer.message import Message, Attachment
 from pyramid.renderers import render
 from pyramid.i18n import TranslationStringFactory
+
+import premailer
 
 _ = TranslationStringFactory('OpenWorkouts')
@@ -45,10 +47,14 @@
     mailer = get_mailer(request)
     txt_body = render(txt_template, context, request)
-    html_body = render(html_template, context, request)
+    html_body = premailer.transform(render(html_template, context, request))
     message = Message(
         subject=subject,
         recipients=[user.email],
-        body=txt_body,
-        html=html_body
+        body=Attachment(data=txt_body,
+                        content_type="text/plain; charset=utf-8",
+                        transfer_encoding="quoted-printable"),
+        html=Attachment(data=html_body,
+                        content_type="text/html; charset=utf-8",
+                        transfer_encoding="quoted-printable")
     )
     message = idna_encode_recipients(message)
Index: ow/static/css/main.css
===================================================================
--- ow/static/css/main.css	(revision 42d775c2e48698445980203230ce3cf40e7631ab)
+++ ow/static/css/main.css	(revision 1829fbf68f08df8a3f7efb4bcd04aa5fdbe66654)
@@ -1492,11 +1492,17 @@
   justify-content: center;
   align-items: center;
-  min-height: calc(100vh - 98px);
+  /* dynamic min-height based on window height does not work well
+     with premailer and generating the proper html with styles for mails */
+  min-height: 400px;
   padding: 1em 0;
-  color: #e1e1e1;
+  /* RGB calculated color does not work well with premailer and
+       generating the proper html with styles for mails */
+  color: #151515;
 }
 .verify-account-content .info {
   max-width: 580px;
-  background-color: rgba(21, 21, 21, 0.6);
+  /* RGB calculated color does not work well with premailer and
+         generating the proper html with styles for mails */
+  background-color: #e1e1e1;
   border-radius: 6px;
   padding: 2em 1.5em;
@@ -1506,5 +1512,7 @@
 }
 .verify-account-content a {
-  color: #e1e1e1;
+  /* RGB calculated color does not work well with premailer and
+           generating the proper html with styles for mails */
+  color: #151515;
   font-size: 13px;
   text-decoration: none;
@@ -1512,13 +1520,13 @@
 }
 .verify-account-content a:hover {
-  color: white;
+  color: #151515;
 }
 .verify-account-content .button {
-  transition: all 500ms ease-in-out;
   background-color: #EE4056;
+  background: #EE4056;
   color: white;
   text-transform: uppercase;
 }
 .verify-account-content .button:hover {
-  background-color: #e6152f;
-}
+  background-color: #F60002;
+}
Index: ow/static/less/pages/verify_account.less
===================================================================
--- ow/static/less/pages/verify_account.less	(revision 42d775c2e48698445980203230ce3cf40e7631ab)
+++ ow/static/less/pages/verify_account.less	(revision 1829fbf68f08df8a3f7efb4bcd04aa5fdbe66654)
@@ -5,11 +5,17 @@
     justify-content: center;
     align-items: center;
-    min-height: calc(100vh - 98px);
+    /* dynamic min-height based on window height does not work well
+     with premailer and generating the proper html with styles for mails */
+    min-height: 400px;
     padding: 1em 0;
-    color: @color-main-light;
+    /* RGB calculated color does not work well with premailer and
+       generating the proper html with styles for mails */
+    color: #151515;
 
     .info {
         max-width: 580px;
-        background-color: fadeout(@color-main, 40%);
+        /* RGB calculated color does not work well with premailer and
+         generating the proper html with styles for mails */
+        background-color: #e1e1e1;
         border-radius: 6px;
         padding: 2em  1.5em;
@@ -20,20 +26,22 @@
 
     a {
-        color: @color-main-light;
+        /* RGB calculated color does not work well with premailer and
+           generating the proper html with styles for mails */
+        color: #151515;
         font-size: 13px;
         text-decoration: none;
         margin-right: .75em;
         &:hover {
-            color: white;
+            color: #151515;
         }
     }
 
     .button {
-        transition: all 500ms ease-in-out;
         background-color: @color-app;
+        background: @color-app;
         color: white;
         text-transform: uppercase;
         &:hover {
-            background-color: darken(@color-app, 10%);
+            background-color: @color-app-important;
         }
     }
Index: setup.py
===================================================================
--- setup.py	(revision 42d775c2e48698445980203230ce3cf40e7631ab)
+++ setup.py	(revision 1829fbf68f08df8a3f7efb4bcd04aa5fdbe66654)
@@ -35,5 +35,6 @@
     'fitparse',
     'splinter',
-    'Pillow'
+    'Pillow',
+    'premailer'
 ]
 
