From 86e49115d06e32bc19d8078240c2cc896855e759 Mon Sep 17 00:00:00 2001
From: Anojh <anojh@hotmail.com>
Date: Wed, 25 Apr 2018 01:26:34 -0700
Subject: [PATCH] CSS done for the template

---
 .../Templates/NewsletterTemplate.html         | 205 ++++++++++--------
 1 file changed, 114 insertions(+), 91 deletions(-)

diff --git a/src/Ombi.Notifications.Templates/Templates/NewsletterTemplate.html b/src/Ombi.Notifications.Templates/Templates/NewsletterTemplate.html
index 79d97e2fe..67a632ee6 100644
--- a/src/Ombi.Notifications.Templates/Templates/NewsletterTemplate.html
+++ b/src/Ombi.Notifications.Templates/Templates/NewsletterTemplate.html
@@ -4,118 +4,141 @@
     <meta name="viewport" content="width=device-width" />
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Ombi</title>
-    <style media="all" type="text/css">
-        @media all {
-            .btn-primary table td:hover {
-                background-color: #34495e !important;
-            }
-
-            .btn-primary a:hover {
-                background-color: #34495e !important;
-                border-color: #34495e !important;
-            }
+    <style type="text/css">
+        img {
+            border: none;
+            -ms-interpolation-mode: bicubic;
+            max-width: 100%;
         }
 
-        @media all {
-            .btn-secondary a:hover {
-                border-color: #34495e !important;
-                color: #34495e !important;
-            }
+        body {
+            font-family: 'Open Sans', Helvetica, Arial, sans-serif;
+            -webkit-font-smoothing: antialiased;
+            font-size: 14px;
+            line-height: 1.4;
+            margin: 0;
+            padding: 0;
+            -ms-text-size-adjust: 100%;
+            -webkit-text-size-adjust: 100%;
         }
 
-        @media only screen and (max-width: 620px) {
+        table {
+            border-collapse: separate;
+            mso-table-lspace: 0pt;
+            mso-table-rspace: 0pt;
+            width: 100%;
+        }
+
+        table td {
+            font-family: 'Open Sans', Helvetica, Arial, sans-serif;
+            font-size: 14px;
+            vertical-align: top;
+        }
+
+        .body {
+            width: 100%;
+        }
+
+        .container {
+            display: block;
+            margin: 0 auto !important;
+            max-width: 1042px;
+            padding: 10px;
+            width: 1042px;
+        }
+
+        .content {
+            box-sizing: border-box;
+            display: block;
+            margin: 0 auto;
+            max-width: 1037px;
+            padding: 10px;
+        }
+
+        .main {
+            border-radius: 3px;
+            width: 100%;
+        }
+
+        .wrapper {
+            box-sizing: border-box;
+            padding: 5px;
+            overflow: auto;
+        }
+
+        .content-block {
+            padding-bottom: 10px;
+            padding-top: 10px;
+        }
+
+        .footer {
+            clear: both;
+            margin-top: 10px;
+            text-align: center;
+            width: 100%;
+            font-size: 12px;
+        }
+
+        .footer td,
+        .footer p,
+        .footer span,
+        .footer a {
+            color: #fff;
+            font-size: 12px;
+            text-align: center;
+        }
+
+        h1 {
+            color: #ffffff;
+            font-family: 'Open Sans', Helvetica, Arial, sans-serif;
+            font-weight: 400;
+            margin: 0;
+            color: #ff761b;
+        }
+
+        p {
+            font-family: 'Open Sans', Helvetica, Arial, sans-serif;
+            font-weight: 400;
+            margin: 0;
+        }
+
+        p li,
+        ul li {
+            list-style-position: inside;
+            margin-left: 5px;
+        }
+
+        a {
+            text-decoration: none;
+        }
+
+        @media only screen and (max-width: 1040px) {
+            .media-card {
+                display: block !important;
+                margin-top: 0 !important;
+                margin-right: auto !important;
+                margin-bottom: 10px !important;
+                margin-left: auto !important;
+            }
+
             table[class=body] h1 {
                 font-size: 28px !important;
                 margin-bottom: 10px !important;
             }
 
-            table[class=body] h2 {
-                font-size: 22px !important;
-                margin-bottom: 10px !important;
-            }
-
-            table[class=body] h3 {
-                font-size: 16px !important;
-                margin-bottom: 10px !important;
-            }
-
-            table[class=body] p,
-            table[class=body] ul,
-            table[class=body] ol,
-            table[class=body] td,
-            table[class=body] span,
-            table[class=body] a {
-                font-size: 16px !important;
-            }
-
-            table[class=body] .wrapper,
-            table[class=body] .article {
-                padding: 10px !important;
-            }
-
-            table[class=body] .content {
-                padding: 0 !important;
-            }
-
             table[class=body] .container {
                 padding: 0 !important;
                 width: 100% !important;
             }
 
-            table[class=body] .header {
-                margin-bottom: 10px !important;
-            }
-
             table[class=body] .main {
                 border-left-width: 0 !important;
                 border-radius: 0 !important;
                 border-right-width: 0 !important;
             }
-
-            table[class=body] .btn table {
-                width: 100% !important;
-            }
-
-            table[class=body] .btn a {
-                width: 100% !important;
-            }
-
-            table[class=body] .img-responsive {
-                height: auto !important;
-                max-width: 100% !important;
-                width: auto !important;
-            }
-
-            table[class=body] .alert td {
-                border-radius: 0 !important;
-                padding: 10px !important;
-            }
-
-            table[class=body] .span-2,
-            table[class=body] .span-3 {
-                max-width: none !important;
-                width: 100% !important;
-            }
-
-            table[class=body] .receipt {
-                width: 100% !important;
-            }
         }
 
         @media all {
-            .ExternalClass {
-                width: 100%;
-            }
-
-                .ExternalClass,
-                .ExternalClass p,
-                .ExternalClass span,
-                .ExternalClass font,
-                .ExternalClass td,
-                .ExternalClass div {
-                    line-height: 100%;
-                }
-
             .apple-link a {
                 color: inherit !important;
                 font-family: inherit !important;
@@ -150,7 +173,7 @@
                                         <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top">
                                             <br />
                                             <br />
-                                            <p style="font-family: sans-serif; font-size: 20px; font-weight: normal; margin: 0; Margin-bottom: 15px; text-align: center;">{@INTRO}</p>
+                                            <p style="color: #fff; font-family: sans-serif; font-size: 20px; font-weight: normal; margin: 0; Margin-bottom: 15px; text-align: center;">{@INTRO}</p>
 
                                         </td>
                                     </tr>