1 /* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
2 #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
3 .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
4 .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
5 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 */
6 table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
7 img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
9 /* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
10 body{margin:0; padding:0;}
11 img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
12 table{border-collapse:collapse !important;}
13 body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
15 /* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
17 /* ========== Page Styles ========== */
19 .roo-m-body-cell {padding:20px;}
20 .roo-m-body-container{width:600px;}
24 * @section background style
25 * @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
28 body, .roo-m-body-table{
29 /*@editable*/ background-color:#DEE0E2;
34 * @section background style
35 * @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
39 /*@editable*/ border-top:4px solid #BBBBBB;
44 * @section email border
45 * @tip Set the border for your email.
47 .roo-m-body-container{
48 /*@editable*/ border:1px solid #BBBBBB;
54 * @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
58 /*@editable*/ color:#202020 !important;
60 /*@editable*/ font-family:Helvetica;
61 /*@editable*/ font-size:26px;
62 /*@editable*/ font-style:normal;
63 /*@editable*/ font-weight:bold;
64 /*@editable*/ line-height:100%;
65 /*@editable*/ letter-spacing:normal;
70 /*@editable*/ text-align:left;
76 * @tip Set the styling for all second-level headings in your emails.
80 /*@editable*/ color:#404040 !important;
82 /*@editable*/ font-family:Helvetica;
83 /*@editable*/ font-size:20px;
84 /*@editable*/ font-style:normal;
85 /*@editable*/ font-weight:bold;
86 /*@editable*/ line-height:100%;
87 /*@editable*/ letter-spacing:normal;
92 /*@editable*/ text-align:left;
98 * @tip Set the styling for all third-level headings in your emails.
102 /*@editable*/ color:#606060 !important;
104 /*@editable*/ font-family:Helvetica;
105 /*@editable*/ font-size:16px;
106 /*@editable*/ font-style:italic;
107 /*@editable*/ font-weight:normal;
108 /*@editable*/ line-height:100%;
109 /*@editable*/ letter-spacing:normal;
114 /*@editable*/ text-align:left;
120 * @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
124 /*@editable*/ color:#808080 !important;
126 /*@editable*/ font-family:Helvetica;
127 /*@editable*/ font-size:14px;
128 /*@editable*/ font-style:italic;
129 /*@editable*/ font-weight:normal;
130 /*@editable*/ line-height:100%;
131 /*@editable*/ letter-spacing:normal;
136 /*@editable*/ text-align:left;
139 /* ========== Header Styles ========== */
143 * @section preheader style
144 * @tip Set the background color and bottom border for your email's preheader area.
148 /*@editable*/ background-color:#F4F4F4;
149 /*@editable*/ border-bottom:1px solid #CCCCCC;
154 * @section preheader text
155 * @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
157 .roo-m-preheader-content{
158 /*@editable*/ color:#808080;
159 /*@editable*/ font-family:Helvetica;
160 /*@editable*/ font-size:10px;
161 /*@editable*/ line-height:125%;
162 /*@editable*/ text-align:left;
167 * @section preheader link
168 * @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
170 .roo-m-preheader-content a:link,
171 .roo-m-preheader-content a:visited,
172 .roo-m-preheader-content a .yshortcuts /* Yahoo! Mail Override */
174 /*@editable*/ color:#606060;
175 /*@editable*/ font-weight:normal;
176 /*@editable*/ text-decoration:underline;
181 * @section header style
182 * @tip Set the background color and borders for your email's header area.
186 /*@editable*/ background-color:#F4F4F4;
187 /*@editable*/ border-top:1px solid #FFFFFF;
188 /*@editable*/ border-bottom:1px solid #CCCCCC;
193 * @section header text
194 * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
196 .roo-m-header-content{
197 /*@editable*/ color:#505050;
198 /*@editable*/ font-family:Helvetica;
199 /*@editable*/ font-size:20px;
200 /*@editable*/ font-weight:bold;
201 /*@editable*/ line-height:100%;
202 /*@editable*/ padding-top:0;
203 /*@editable*/ padding-right:0;
204 /*@editable*/ padding-bottom:0;
205 /*@editable*/ padding-left:0;
206 /*@editable*/ text-align:left;
207 /*@editable*/ vertical-align:middle;
212 * @section header link
213 * @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
215 .roo-m-header-content a:link,
216 .roo-m-header-content a:visited,
217 .roo-m-header-content a .yshortcuts /* Yahoo! Mail Override */
219 /*@editable*/ color:#EB4102;
220 /*@editable*/ font-weight:normal;
221 /*@editable*/ text-decoration:underline;
224 .roo-m-header-content > img {
229 /* ========== Body Styles ========== */
233 * @section body style
234 * @tip Set the background color and borders for your email's body area.
237 /*@editable*/ background-color:#F4F4F4;
238 /*@editable*/ border-top:1px solid #FFFFFF;
239 /*@editable*/ border-bottom:1px solid #CCCCCC;
245 * @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
248 .roo-m-body-content {
249 /*@editable*/ color:#505050;
250 /*@editable*/ font-family:Helvetica;
251 /*@editable*/ font-size:16px;
252 /*@editable*/ line-height:150%;
257 /*@editable*/ text-align:left;
263 * @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
265 .roo-m-body-content a:link,
266 .roo-m-body-content a:visited,
267 .roo-m-body-content a .yshortcuts /* Yahoo! Mail Override */
269 /*@editable*/ color:#EB4102;
270 /*@editable*/ font-weight:normal;
271 /*@editable*/ text-decoration:underline;
274 .roo-m-body-content img{
280 /* ========== Column Styles ========== */
282 .roo-m-column {width:260px;}
286 * @section column style
287 * @tip Set the background color and borders for your email's column area.
290 /*@editable*/ background-color:#F4F4F4;
291 /*@editable*/ border-top:1px solid #FFFFFF;
292 /*@editable*/ border-bottom:1px solid #CCCCCC;
297 * @section left column text
298 * @tip Set the styling for your email's left column content text. Choose a size and color that is easy to read.
300 .roo-m-column-left-content{
301 /*@editable*/ color:#505050;
302 /*@editable*/ font-family:Helvetica;
303 /*@editable*/ font-size:14px;
304 /*@editable*/ line-height:150%;
309 /*@editable*/ text-align:left;
314 * @section left column link
315 * @tip Set the styling for your email's left column content links. Choose a color that helps them stand out from your text.
317 .roo-m-column-left-content a:link,
318 .roo-m-column-left-content a:visited,
319 .roo-m-column-left-content a .yshortcuts /* Yahoo! Mail Override */
321 /*@editable*/ color:#EB4102;
322 /*@editable*/ font-weight:normal;
323 /*@editable*/ text-decoration:underline;
328 * @section right column text
329 * @tip Set the styling for your email's right column content text. Choose a size and color that is easy to read.
331 .roo-m-column-right-content{
332 /*@editable*/ color:#505050;
333 /*@editable*/ font-family:Helvetica;
334 /*@editable*/ font-size:14px;
335 /*@editable*/ line-height:150%;
340 /*@editable*/ text-align:left;
345 * @section right column link
346 * @tip Set the styling for your email's right column content links. Choose a color that helps them stand out from your text.
348 .roo-m-column-right-content a:link,
349 .roo-m-column-right-content a:visited,
350 .roo-m-column-right-content a .yshortcuts /* Yahoo! Mail Override */{
351 /*@editable*/ color:#EB4102;
352 /*@editable*/ font-weight:normal;
353 /*@editable*/ text-decoration:underline;
356 .roo-m-column-left-content img,
357 .roo-m-column-right-content img{
363 /* ========== Footer Styles ========== */
367 * @section footer style
368 * @tip Set the background color and borders for your email's footer area.
372 /*@editable*/ background-color:#F4F4F4;
373 /*@editable*/ border-top:1px solid #FFFFFF;
378 * @section footer text
379 * @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
382 .roo-m-footer-content {
383 /*@editable*/ color:#808080;
384 /*@editable*/ font-family:Helvetica;
385 /*@editable*/ font-size:10px;
386 /*@editable*/ line-height:150%;
391 /*@editable*/ text-align:left;
396 * @section footer link
397 * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
399 .roo-m-footer-content a:link,
400 .roo-m-footer-content a:visited,
401 .roo-m-footer-content a .yshortcuts, /* Yahoo! Mail Override */
402 .roo-m-footer-content a span /* Yahoo! Mail Override */
404 /*@editable*/ color:#606060;
405 /*@editable*/ font-weight:normal;
406 /*@editable*/ text-decoration:underline;
409 /* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */
411 @media only screen and (max-width: 480px){
412 /* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
413 body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
414 body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
416 /* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
417 .roo-m-body-cell{padding:10px !important;}
419 /* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
421 /* ======== Page Styles ======== */
425 * @section template width
426 * @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.
429 .roo-m-body-contaner{
430 max-width:600px !important;
431 /*@editable*/ width:100% !important;
437 * @tip Make the first-level headings larger in size for better readability on small screens.
440 /*@editable*/ font-size:24px !important;
441 /*@editable*/ line-height:100% !important;
447 * @tip Make the second-level headings larger in size for better readability on small screens.
450 /*@editable*/ font-size:20px !important;
451 /*@editable*/ line-height:100% !important;
457 * @tip Make the third-level headings larger in size for better readability on small screens.
460 /*@editable*/ font-size:18px !important;
461 /*@editable*/ line-height:100% !important;
467 * @tip Make the fourth-level headings larger in size for better readability on small screens.
470 /*@editable*/ font-size:16px !important;
471 /*@editable*/ line-height:100% !important;
474 /* ======== Header Styles ======== */
476 .roo-m-preheader{display:none !important;} /* Hide the template preheader to save space */
480 * @section header image
481 * @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.
484 height:auto !important;
485 /*@editable*/ max-width:600px !important;
486 /*@editable*/ width:100% !important;
491 * @section header text
492 * @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
494 .roo-m-header-content{
495 /*@editable*/ font-size:20px !important;
496 /*@editable*/ line-height:125% !important;
499 /* ======== Body Styles ======== */
504 * @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
508 /*@editable*/ font-size:18px !important;
509 /*@editable*/ line-height:125% !important;
512 /* ======== Column Styles ======== */
514 .roo-m-column {display:block !important; width:100% !important;}
518 * @section column image
519 * @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.
521 .roo-m-column-image {
522 height:auto !important;
523 /*@editable*/ max-width:480px !important;
524 /*@editable*/ width:100% !important;
529 * @section left column text
530 * @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.
532 .roo-m-column-left-content{
533 /*@editable*/ font-size:16px !important;
534 /*@editable*/ line-height:125% !important;
539 * @section right column text
540 * @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.
542 .roo-m-column-right-content{
543 /*@editable*/ font-size:16px !important;
544 /*@editable*/ line-height:125% !important;
547 /* ======== Footer Styles ======== */
551 * @section footer text
552 * @tip Make the body content text larger in size for better readability on small screens.
554 .roo-m-column-footer-content{
555 /*@editable*/ font-size:14px !important;
556 /*@editable*/ line-height:115% !important;
559 .roo-m-column-footer-content a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */