2 /* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
3 #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
4 .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
5 .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
6 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 */
7 table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
8 img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
10 /* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
11 body{margin:0; padding:0;}
12 img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
13 table{border-collapse:collapse !important;}
14 body, .roo-m-body-table, .roo-m-body-cell{height:100% !important; margin:0; padding:0; width:100% !important;}
16 /* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
18 /* ========== Page Styles ========== */
20 .roo-m-body-cell {padding:20px;}
21 .roo-m-body-container{width:600px;}
25 * @section background style
26 * @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
29 body, .roo-m-body-table{
30 /*@editable*/ background-color:#DEE0E2;
35 * @section background style
36 * @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
40 /*@editable*/ border-top:4px solid #BBBBBB;
45 * @section email border
46 * @tip Set the border for your email.
48 .roo-m-body-container{
49 /*@editable*/ border:1px solid #BBBBBB;
55 * @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
59 /*@editable*/ color:#202020 !important;
61 /*@editable*/ font-family:Helvetica;
62 /*@editable*/ font-size:26px;
63 /*@editable*/ font-style:normal;
64 /*@editable*/ font-weight:bold;
65 /*@editable*/ line-height:100%;
66 /*@editable*/ letter-spacing:normal;
71 /*@editable*/ text-align:left;
77 * @tip Set the styling for all second-level headings in your emails.
81 /*@editable*/ color:#404040 !important;
83 /*@editable*/ font-family:Helvetica;
84 /*@editable*/ font-size:20px;
85 /*@editable*/ font-style:normal;
86 /*@editable*/ font-weight:bold;
87 /*@editable*/ line-height:100%;
88 /*@editable*/ letter-spacing:normal;
93 /*@editable*/ text-align:left;
99 * @tip Set the styling for all third-level headings in your emails.
103 /*@editable*/ color:#606060 !important;
105 /*@editable*/ font-family:Helvetica;
106 /*@editable*/ font-size:16px;
107 /*@editable*/ font-style:italic;
108 /*@editable*/ font-weight:normal;
109 /*@editable*/ line-height:100%;
110 /*@editable*/ letter-spacing:normal;
115 /*@editable*/ text-align:left;
121 * @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
125 /*@editable*/ color:#808080 !important;
127 /*@editable*/ font-family:Helvetica;
128 /*@editable*/ font-size:14px;
129 /*@editable*/ font-style:italic;
130 /*@editable*/ font-weight:normal;
131 /*@editable*/ line-height:100%;
132 /*@editable*/ letter-spacing:normal;
137 /*@editable*/ text-align:left;
140 /* ========== Header Styles ========== */
144 * @section preheader style
145 * @tip Set the background color and bottom border for your email's preheader area.
149 /*@editable*/ background-color:#F4F4F4;
150 /*@editable*/ border-bottom:1px solid #CCCCCC;
155 * @section preheader text
156 * @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
158 .roo-m-preheader-content{
159 /*@editable*/ color:#808080;
160 /*@editable*/ font-family:Helvetica;
161 /*@editable*/ font-size:10px;
162 /*@editable*/ line-height:125%;
163 /*@editable*/ text-align:left;
168 * @section preheader link
169 * @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
171 .roo-m-preheader-content a:link,
172 .roo-m-preheader-content a:visited,
173 .roo-m-preheader-content a .yshortcuts /* Yahoo! Mail Override */
175 /*@editable*/ color:#606060;
176 /*@editable*/ font-weight:normal;
177 /*@editable*/ text-decoration:underline;
182 * @section header style
183 * @tip Set the background color and borders for your email's header area.
187 /*@editable*/ background-color:#F4F4F4;
188 /*@editable*/ border-top:1px solid #FFFFFF;
189 /*@editable*/ border-bottom:1px solid #CCCCCC;
194 * @section header text
195 * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
197 .roo-m-header-content{
198 /*@editable*/ color:#505050;
199 /*@editable*/ font-family:Helvetica;
200 /*@editable*/ font-size:20px;
201 /*@editable*/ font-weight:bold;
202 /*@editable*/ line-height:100%;
203 /*@editable*/ padding-top:0;
204 /*@editable*/ padding-right:0;
205 /*@editable*/ padding-bottom:0;
206 /*@editable*/ padding-left:0;
207 /*@editable*/ text-align:left;
208 /*@editable*/ vertical-align:middle;
213 * @section header link
214 * @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
216 .roo-m-header-content a:link,
217 .roo-m-header-content a:visited,
218 .roo-m-header-content a .yshortcuts /* Yahoo! Mail Override */
220 /*@editable*/ color:#EB4102;
221 /*@editable*/ font-weight:normal;
222 /*@editable*/ text-decoration:underline;
225 .roo-m-header-content > img {
230 /* ========== Body Styles ========== */
234 * @section body style
235 * @tip Set the background color and borders for your email's body area.
238 /*@editable*/ background-color:#F4F4F4;
239 /*@editable*/ border-top:1px solid #FFFFFF;
240 /*@editable*/ border-bottom:1px solid #CCCCCC;
246 * @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
249 .roo-m-body-content {
250 /*@editable*/ color:#505050;
251 /*@editable*/ font-family:Helvetica;
252 /*@editable*/ font-size:16px;
253 /*@editable*/ line-height:150%;
258 /*@editable*/ text-align:left;
264 * @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
266 .roo-m-body-content a:link,
267 .roo-m-body-content a:visited,
268 .roo-m-body-content a .yshortcuts /* Yahoo! Mail Override */
270 /*@editable*/ color:#EB4102;
271 /*@editable*/ font-weight:normal;
272 /*@editable*/ text-decoration:underline;
275 .roo-m-body-content img{
281 /* ========== Column Styles ========== */
283 .roo-m-column {width:260px;}
287 * @section column style
288 * @tip Set the background color and borders for your email's column area.
291 /*@editable*/ background-color:#F4F4F4;
292 /*@editable*/ border-top:1px solid #FFFFFF;
293 /*@editable*/ border-bottom:1px solid #CCCCCC;
298 * @section left column text
299 * @tip Set the styling for your email's left column content text. Choose a size and color that is easy to read.
301 .roo-m-column-left-content{
302 /*@editable*/ color:#505050;
303 /*@editable*/ font-family:Helvetica;
304 /*@editable*/ font-size:14px;
305 /*@editable*/ line-height:150%;
310 /*@editable*/ text-align:left;
315 * @section left column link
316 * @tip Set the styling for your email's left column content links. Choose a color that helps them stand out from your text.
318 .roo-m-column-left-content a:link,
319 .roo-m-column-left-content a:visited,
320 .roo-m-column-left-content a .yshortcuts /* Yahoo! Mail Override */
322 /*@editable*/ color:#EB4102;
323 /*@editable*/ font-weight:normal;
324 /*@editable*/ text-decoration:underline;
329 * @section right column text
330 * @tip Set the styling for your email's right column content text. Choose a size and color that is easy to read.
332 .roo-m-column-right-content{
333 /*@editable*/ color:#505050;
334 /*@editable*/ font-family:Helvetica;
335 /*@editable*/ font-size:14px;
336 /*@editable*/ line-height:150%;
341 /*@editable*/ text-align:left;
346 * @section right column link
347 * @tip Set the styling for your email's right column content links. Choose a color that helps them stand out from your text.
349 .roo-m-column-right-content a:link,
350 .roo-m-column-right-content a:visited,
351 .roo-m-column-right-content a .yshortcuts /* Yahoo! Mail Override */{
352 /*@editable*/ color:#EB4102;
353 /*@editable*/ font-weight:normal;
354 /*@editable*/ text-decoration:underline;
357 .roo-m-column-left-content img,
358 .roo-m-column-right-content img{
364 /* ========== Footer Styles ========== */
368 * @section footer style
369 * @tip Set the background color and borders for your email's footer area.
373 /*@editable*/ background-color:#F4F4F4;
374 /*@editable*/ border-top:1px solid #FFFFFF;
379 * @section footer text
380 * @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
383 .roo-m-footer-content {
384 /*@editable*/ color:#808080;
385 /*@editable*/ font-family:Helvetica;
386 /*@editable*/ font-size:10px;
387 /*@editable*/ line-height:150%;
392 /*@editable*/ text-align:left;
397 * @section footer link
398 * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
400 .roo-m-footer-content a:link,
401 .roo-m-footer-content a:visited,
402 .roo-m-footer-content a .yshortcuts, /* Yahoo! Mail Override */
403 .roo-m-footer-content a span /* Yahoo! Mail Override */
405 /*@editable*/ color:#606060;
406 /*@editable*/ font-weight:normal;
407 /*@editable*/ text-decoration:underline;
410 /* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */
412 @media only screen and (max-width: 520px){
413 /* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
414 body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
415 body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
417 /* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
418 .roo-m-body-cell{padding:10px !important;}
420 /* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
422 /* ======== Page Styles ======== */
426 * @section template width
427 * @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.
430 .roo-m-body-container{
431 max-width:480px !important;
432 /*@editable*/ width:100% !important;
438 * @tip Make the first-level headings larger in size for better readability on small screens.
441 /*@editable*/ font-size:24px !important;
442 /*@editable*/ line-height:100% !important;
448 * @tip Make the second-level headings larger in size for better readability on small screens.
451 /*@editable*/ font-size:20px !important;
452 /*@editable*/ line-height:100% !important;
458 * @tip Make the third-level headings larger in size for better readability on small screens.
461 /*@editable*/ font-size:18px !important;
462 /*@editable*/ line-height:100% !important;
468 * @tip Make the fourth-level headings larger in size for better readability on small screens.
471 /*@editable*/ font-size:16px !important;
472 /*@editable*/ line-height:100% !important;
475 /* ======== Header Styles ======== */
477 .roo-m-preheader{display:none !important;} /* Hide the template preheader to save space */
481 * @section header image
482 * @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.
485 height:auto !important;
486 /*@editable*/ max-width:420px !important;
487 /*@editable*/ width:100% !important;
492 * @section header text
493 * @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
495 .roo-m-header-content{
496 /*@editable*/ font-size:20px !important;
497 /*@editable*/ line-height:125% !important;
500 /* ======== Body Styles ======== */
505 * @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
509 /*@editable*/ font-size:18px !important;
510 /*@editable*/ line-height:125% !important;
513 /* ======== Column Styles ======== */
515 .roo-m-column {display:block !important; width:100% !important;}
519 * @section column image
520 * @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.
523 .roo-m-body-content img
525 height:auto !important;
526 /*@editable*/ max-width:420px !important;
527 /*@editable*/ width:100% !important;
532 * @section left column text
533 * @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.
535 .roo-m-column-left-content{
536 /*@editable*/ font-size:16px !important;
537 /*@editable*/ line-height:125% !important;
542 * @section right column text
543 * @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.
545 .roo-m-column-right-content{
546 /*@editable*/ font-size:16px !important;
547 /*@editable*/ line-height:125% !important;
550 /* ======== Footer Styles ======== */
554 * @section footer text
555 * @tip Make the body content text larger in size for better readability on small screens.
557 .roo-m-column-footer-content{
558 /*@editable*/ font-size:14px !important;
559 /*@editable*/ line-height:115% !important;
562 .roo-m-column-footer-content a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */