css-mailer/mailer.css
authorAlan Knowles <alan@roojs.com>
Thu, 18 Sep 2014 09:06:00 +0000 (17:06 +0800)
committerAlan Knowles <alan@roojs.com>
Thu, 18 Sep 2014 09:06:00 +0000 (17:06 +0800)
css-mailer/mailer.css [new file with mode: 0644]

diff --git a/css-mailer/mailer.css b/css-mailer/mailer.css
new file mode 100644 (file)
index 0000000..7a7870f
--- /dev/null
@@ -0,0 +1,560 @@
+/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
+#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
+.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
+.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
+body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
+table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
+img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
+
+/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
+body{margin:0; padding:0;}
+img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
+table{border-collapse:collapse !important;}
+body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
+
+/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
+
+/* ========== Page Styles ========== */
+
+.roo-m-body-cell {padding:20px;}
+.roo-m-body-container{width:600px;}
+
+/**
+* @tab Page
+* @section background style
+* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
+* @theme page
+*/
+body, .roo-m-body-table{
+    /*@editable*/ background-color:#DEE0E2;
+}
+
+/**
+* @tab Page
+* @section background style
+* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
+* @theme page
+*/
+.roo-m-body-cell{
+    /*@editable*/ border-top:4px solid #BBBBBB;
+}
+
+/**
+* @tab Page
+* @section email border
+* @tip Set the border for your email.
+*/
+.roo-m-body-container{
+    /*@editable*/ border:1px solid #BBBBBB;
+}
+
+/**
+* @tab Page
+* @section heading 1
+* @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
+* @style heading 1
+*/
+h1{
+    /*@editable*/ color:#202020 !important;
+    display:block;
+    /*@editable*/ font-family:Helvetica;
+    /*@editable*/ font-size:26px;
+    /*@editable*/ font-style:normal;
+    /*@editable*/ font-weight:bold;
+    /*@editable*/ line-height:100%;
+    /*@editable*/ letter-spacing:normal;
+    margin-top:0;
+    margin-right:0;
+    margin-bottom:10px;
+    margin-left:0;
+    /*@editable*/ text-align:left;
+}
+
+/**
+* @tab Page
+* @section heading 2
+* @tip Set the styling for all second-level headings in your emails.
+* @style heading 2
+*/
+h2{
+    /*@editable*/ color:#404040 !important;
+    display:block;
+    /*@editable*/ font-family:Helvetica;
+    /*@editable*/ font-size:20px;
+    /*@editable*/ font-style:normal;
+    /*@editable*/ font-weight:bold;
+    /*@editable*/ line-height:100%;
+    /*@editable*/ letter-spacing:normal;
+    margin-top:0;
+    margin-right:0;
+    margin-bottom:10px;
+    margin-left:0;
+    /*@editable*/ text-align:left;
+}
+
+/**
+* @tab Page
+* @section heading 3
+* @tip Set the styling for all third-level headings in your emails.
+* @style heading 3
+*/
+h3{
+    /*@editable*/ color:#606060 !important;
+    display:block;
+    /*@editable*/ font-family:Helvetica;
+    /*@editable*/ font-size:16px;
+    /*@editable*/ font-style:italic;
+    /*@editable*/ font-weight:normal;
+    /*@editable*/ line-height:100%;
+    /*@editable*/ letter-spacing:normal;
+    margin-top:0;
+    margin-right:0;
+    margin-bottom:10px;
+    margin-left:0;
+    /*@editable*/ text-align:left;
+}
+
+/**
+* @tab Page
+* @section heading 4
+* @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
+* @style heading 4
+*/
+h4{
+    /*@editable*/ color:#808080 !important;
+    display:block;
+    /*@editable*/ font-family:Helvetica;
+    /*@editable*/ font-size:14px;
+    /*@editable*/ font-style:italic;
+    /*@editable*/ font-weight:normal;
+    /*@editable*/ line-height:100%;
+    /*@editable*/ letter-spacing:normal;
+    margin-top:0;
+    margin-right:0;
+    margin-bottom:10px;
+    margin-left:0;
+    /*@editable*/ text-align:left;
+}
+
+/* ========== Header Styles ========== */
+
+/**
+* @tab Header
+* @section preheader style
+* @tip Set the background color and bottom border for your email's preheader area.
+* @theme header
+*/
+.roo-m-preheader{
+    /*@editable*/ background-color:#F4F4F4;
+    /*@editable*/ border-bottom:1px solid #CCCCCC;
+}
+
+/**
+* @tab Header
+* @section preheader text
+* @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
+*/
+.roo-m-preheader-content{
+    /*@editable*/ color:#808080;
+    /*@editable*/ font-family:Helvetica;
+    /*@editable*/ font-size:10px;
+    /*@editable*/ line-height:125%;
+    /*@editable*/ text-align:left;
+}
+
+/**
+* @tab Header
+* @section preheader link
+* @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
+*/
+.roo-m-preheader-content a:link,
+.roo-m-preheader-content a:visited,
+.roo-m-preheader-content a .yshortcuts /* Yahoo! Mail Override */
+{
+    /*@editable*/ color:#606060;
+    /*@editable*/ font-weight:normal;
+    /*@editable*/ text-decoration:underline;
+}
+
+/**
+* @tab Header
+* @section header style
+* @tip Set the background color and borders for your email's header area.
+* @theme header
+*/
+.roo-m-header {
+    /*@editable*/ background-color:#F4F4F4;
+    /*@editable*/ border-top:1px solid #FFFFFF;
+    /*@editable*/ border-bottom:1px solid #CCCCCC;
+}
+
+/**
+* @tab Header
+* @section header text
+* @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
+*/
+.roo-m-header-content{
+    /*@editable*/ color:#505050;
+    /*@editable*/ font-family:Helvetica;
+    /*@editable*/ font-size:20px;
+    /*@editable*/ font-weight:bold;
+    /*@editable*/ line-height:100%;
+    /*@editable*/ padding-top:0;
+    /*@editable*/ padding-right:0;
+    /*@editable*/ padding-bottom:0;
+    /*@editable*/ padding-left:0;
+    /*@editable*/ text-align:left;
+    /*@editable*/ vertical-align:middle;
+}
+
+/**
+* @tab Header
+* @section header link
+* @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
+*/
+.roo-m-header-content a:link,
+.roo-m-header-content a:visited, 
+.roo-m-header-content a .yshortcuts /* Yahoo! Mail Override */
+{
+    /*@editable*/ color:#EB4102;
+    /*@editable*/ font-weight:normal;
+    /*@editable*/ text-decoration:underline;
+}
+
+.roo-m-header-content > img {
+    height:auto;
+    max-width:600px;
+}
+
+/* ========== Body Styles ========== */
+
+/**
+* @tab Body
+* @section body style
+* @tip Set the background color and borders for your email's body area.
+*/
+.roo-m-body {
+    /*@editable*/ background-color:#F4F4F4;
+    /*@editable*/ border-top:1px solid #FFFFFF;
+    /*@editable*/ border-bottom:1px solid #CCCCCC;
+}
+
+/**
+* @tab Body
+* @section body text
+* @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
+* @theme main
+*/
+.roo-m-body-content {
+    /*@editable*/ color:#505050;
+    /*@editable*/ font-family:Helvetica;
+    /*@editable*/ font-size:16px;
+    /*@editable*/ line-height:150%;
+    padding-top:20px;
+    padding-right:20px;
+    padding-bottom:20px;
+    padding-left:20px;
+    /*@editable*/ text-align:left;
+}
+
+/**
+* @tab Body
+* @section body link
+* @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
+*/
+.roo-m-body-content a:link,
+.roo-m-body-content a:visited,
+.roo-m-body-content a .yshortcuts /* Yahoo! Mail Override */
+{
+    /*@editable*/ color:#EB4102;
+    /*@editable*/ font-weight:normal;
+    /*@editable*/ text-decoration:underline;
+}
+
+.roo-m-body-content img{
+    display:inline;
+    height:auto;
+    max-width:560px;
+}
+
+/* ========== Column Styles ========== */
+
+.roo-m-row {width:260px;}
+
+/**
+* @tab Columns
+* @section column style
+* @tip Set the background color and borders for your email's column area.
+*/
+.roo-m-row {
+    /*@editable*/ background-color:#F4F4F4;
+    /*@editable*/ border-top:1px solid #FFFFFF;
+    /*@editable*/ border-bottom:1px solid #CCCCCC;
+}
+
+/**
+* @tab Columns
+* @section left column text
+* @tip Set the styling for your email's left column content text. Choose a size and color that is easy to read.
+*/
+.roo-m-column-left-content{
+    /*@editable*/ color:#505050;
+    /*@editable*/ font-family:Helvetica;
+    /*@editable*/ font-size:14px;
+    /*@editable*/ line-height:150%;
+    padding-top:0;
+    padding-right:20px;
+    padding-bottom:20px;
+    padding-left:20px;
+    /*@editable*/ text-align:left;
+}
+
+/**
+* @tab Columns
+* @section left column link
+* @tip Set the styling for your email's left column content links. Choose a color that helps them stand out from your text.
+*/
+.roo-m-column-left-content a:link,
+.roo-m-column-left-content a:visited,
+.roo-m-column-left-content a .yshortcuts /* Yahoo! Mail Override */
+{
+    /*@editable*/ color:#EB4102;
+    /*@editable*/ font-weight:normal;
+    /*@editable*/ text-decoration:underline;
+}
+
+/**
+* @tab Columns
+* @section right column text
+* @tip Set the styling for your email's right column content text. Choose a size and color that is easy to read.
+*/
+.roo-m-column-right-content{
+    /*@editable*/ color:#505050;
+    /*@editable*/ font-family:Helvetica;
+    /*@editable*/ font-size:14px;
+    /*@editable*/ line-height:150%;
+    padding-top:0;
+    padding-right:20px;
+    padding-bottom:20px;
+    padding-left:20px;
+    /*@editable*/ text-align:left;
+}
+
+/**
+* @tab Columns
+* @section right column link
+* @tip Set the styling for your email's right column content links. Choose a color that helps them stand out from your text.
+*/
+.roo-m-column-right-content a:link,
+.roo-m-column-right-content a:visited,
+.roo-m-column-right-content a .yshortcuts /* Yahoo! Mail Override */{
+    /*@editable*/ color:#EB4102;
+    /*@editable*/ font-weight:normal;
+    /*@editable*/ text-decoration:underline;
+}
+
+.roo-m-column-left-content img,
+.roo-m-column-right-content img{
+    display:inline;
+    height:auto;
+    max-width:260px;
+}
+
+/* ========== Footer Styles ========== */
+
+/**
+* @tab Footer
+* @section footer style
+* @tip Set the background color and borders for your email's footer area.
+* @theme footer
+*/
+.roo-m-footer {
+    /*@editable*/ background-color:#F4F4F4;
+    /*@editable*/ border-top:1px solid #FFFFFF;
+}
+
+/**
+* @tab Footer
+* @section footer text
+* @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
+* @theme footer
+*/
+.roo-m-footer-content {
+    /*@editable*/ color:#808080;
+    /*@editable*/ font-family:Helvetica;
+    /*@editable*/ font-size:10px;
+    /*@editable*/ line-height:150%;
+    padding-top:20px;
+    padding-right:20px;
+    padding-bottom:20px;
+    padding-left:20px;
+    /*@editable*/ text-align:left;
+}
+
+/**
+* @tab Footer
+* @section footer link
+* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
+*/
+.roo-m-footer-content a:link,
+.roo-m-footer-content a:visited,
+.roo-m-footer-content a .yshortcuts, /* Yahoo! Mail Override */
+.roo-m-footer-content a span /* Yahoo! Mail Override */
+{
+    /*@editable*/ color:#606060;
+    /*@editable*/ font-weight:normal;
+    /*@editable*/ text-decoration:underline;
+}
+
+/* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */
+
+@media only screen and (max-width: 480px){
+    /* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
+    body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
+    body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
+
+    /* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
+    .roo-m-body-cell{padding:10px !important;}
+
+    /* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
+
+    /* ======== Page Styles ======== */
+
+    /**
+    * @tab Mobile Styles
+    * @section template width
+    * @tip Make the template fluid for portrait or landscape view adaptability. If a fluid layout doesn't work for you, set the width to 300px instead.
+    */
+    
+    .roo-m-body-contaner{
+        max-width:600px !important;
+        /*@editable*/ width:100% !important;
+    }
+
+    /**
+    * @tab Mobile Styles
+    * @section heading 1
+    * @tip Make the first-level headings larger in size for better readability on small screens.
+    */
+    h1{
+        /*@editable*/ font-size:24px !important;
+        /*@editable*/ line-height:100% !important;
+    }
+
+    /**
+    * @tab Mobile Styles
+    * @section heading 2
+    * @tip Make the second-level headings larger in size for better readability on small screens.
+    */
+    h2{
+        /*@editable*/ font-size:20px !important;
+        /*@editable*/ line-height:100% !important;
+    }
+
+    /**
+    * @tab Mobile Styles
+    * @section heading 3
+    * @tip Make the third-level headings larger in size for better readability on small screens.
+    */
+    h3{
+        /*@editable*/ font-size:18px !important;
+        /*@editable*/ line-height:100% !important;
+    }
+
+    /**
+    * @tab Mobile Styles
+    * @section heading 4
+    * @tip Make the fourth-level headings larger in size for better readability on small screens.
+    */
+    h4{
+        /*@editable*/ font-size:16px !important;
+        /*@editable*/ line-height:100% !important;
+    }
+
+    /* ======== Header Styles ======== */
+
+    .roo-m-preheader{display:none !important;} /* Hide the template preheader to save space */
+
+    /**
+    * @tab Mobile Styles
+    * @section header image
+    * @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
+    */
+    .roo-m-header > img{
+        height:auto !important;
+        /*@editable*/ max-width:600px !important;
+        /*@editable*/ width:100% !important;
+    }
+
+    /**
+    * @tab Mobile Styles
+    * @section header text
+    * @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
+    */
+    .roo-m-header-content{
+        /*@editable*/ font-size:20px !important;
+        /*@editable*/ line-height:125% !important;
+    }
+
+    /* ======== Body Styles ======== */
+
+    /**
+    * @tab Mobile Styles
+    * @section body text
+    * @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
+    */
+    .roo-m-body-content
+    {
+        /*@editable*/ font-size:18px !important;
+        /*@editable*/ line-height:125% !important;
+    }
+
+    /* ======== Column Styles ======== */
+
+    .roo-m-row {display:block !important; width:100% !important;}
+
+    /**
+    * @tab Mobile Styles
+    * @section column image
+    * @tip Make the column image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
+    */
+    .roo-m-column-image {
+        height:auto !important;
+        /*@editable*/ max-width:480px !important;
+        /*@editable*/ width:100% !important;
+    }
+
+    /**
+    * @tab Mobile Styles
+    * @section left column text
+    * @tip Make the left column content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
+    */
+    .roo-m-column-left-content{
+        /*@editable*/ font-size:16px !important;
+        /*@editable*/ line-height:125% !important;
+    }
+
+    /**
+    * @tab Mobile Styles
+    * @section right column text
+    * @tip Make the right column content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
+    */
+    .roo-m-column-right-content{
+        /*@editable*/ font-size:16px !important;
+        /*@editable*/ line-height:125% !important;
+    }
+
+    /* ======== Footer Styles ======== */
+
+    /**
+    * @tab Mobile Styles
+    * @section footer text
+    * @tip Make the body content text larger in size for better readability on small screens.
+    */
+    .roo-m-column-footer-content{
+        /*@editable*/ font-size:14px !important;
+        /*@editable*/ line-height:115% !important;
+    }
+
+    .roo-m-column-footer-content a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
+}
\ No newline at end of file