git.roojs.org Git - roojs1/blob - css-mailer/mailer.css

   1
   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 */
   9
  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;}
  15
  16 /* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
  17
  18 /* ========== Page Styles ========== */
  19
  20 .roo-m-body-cell {padding:20px;}
  21 .roo-m-body-container{width:600px;}
  22
  23 /**
  24 * @tab Page
  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.
  27 * @theme page
  28 */
  29 body, .roo-m-body-table{
  30     /*@editable*/ background-color:#DEE0E2;
  31 }
  32
  33 /**
  34 * @tab Page
  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.
  37 * @theme page
  38 */
  39 .roo-m-body-cell{
  40     /*@editable*/ border-top:4px solid #BBBBBB;
  41 }
  42
  43 /**
  44 * @tab Page
  45 * @section email border
  46 * @tip Set the border for your email.
  47 */
  48 .roo-m-body-container{
  49     /*@editable*/ border:1px solid #BBBBBB;
  50 }
  51
  52 /**
  53 * @tab Page
  54 * @section heading 1
  55 * @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
  56 * @style heading 1
  57 */
  58 h1{
  59     /*@editable*/ color:#202020 !important;
  60     display:block;
  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;
  67     margin-top:0;
  68     margin-right:0;
  69     margin-bottom:10px;
  70     margin-left:0;
  71     /*@editable*/ text-align:left;
  72 }
  73
  74 /**
  75 * @tab Page
  76 * @section heading 2
  77 * @tip Set the styling for all second-level headings in your emails.
  78 * @style heading 2
  79 */
  80 h2{
  81     /*@editable*/ color:#404040 !important;
  82     display:block;
  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;
  89     margin-top:0;
  90     margin-right:0;
  91     margin-bottom:10px;
  92     margin-left:0;
  93     /*@editable*/ text-align:left;
  94 }
  95
  96 /**
  97 * @tab Page
  98 * @section heading 3
  99 * @tip Set the styling for all third-level headings in your emails.
 100 * @style heading 3
 101 */
 102 h3{
 103     /*@editable*/ color:#606060 !important;
 104     display:block;
 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;
 111     margin-top:0;
 112     margin-right:0;
 113     margin-bottom:10px;
 114     margin-left:0;
 115     /*@editable*/ text-align:left;
 116 }
 117
 118 /**
 119 * @tab Page
 120 * @section heading 4
 121 * @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
 122 * @style heading 4
 123 */
 124 h4{
 125     /*@editable*/ color:#808080 !important;
 126     display:block;
 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;
 133     margin-top:0;
 134     margin-right:0;
 135     margin-bottom:10px;
 136     margin-left:0;
 137     /*@editable*/ text-align:left;
 138 }
 139
 140 /* ========== Header Styles ========== */
 141
 142 /**
 143 * @tab Header
 144 * @section preheader style
 145 * @tip Set the background color and bottom border for your email's preheader area.
 146 * @theme header
 147 */
 148 .roo-m-preheader{
 149     /*@editable*/ background-color:#F4F4F4;
 150     /*@editable*/ border-bottom:1px solid #CCCCCC;
 151 }
 152
 153 /**
 154 * @tab Header
 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.
 157 */
 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;
 164 }
 165
 166 /**
 167 * @tab Header
 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.
 170 */
 171 .roo-m-preheader-content a:link,
 172 .roo-m-preheader-content a:visited,
 173 .roo-m-preheader-content a .yshortcuts /* Yahoo! Mail Override */
 174 {
 175     /*@editable*/ color:#606060;
 176     /*@editable*/ font-weight:normal;
 177     /*@editable*/ text-decoration:underline;
 178 }
 179
 180 /**
 181 * @tab Header
 182 * @section header style
 183 * @tip Set the background color and borders for your email's header area.
 184 * @theme header
 185 */
 186 .roo-m-header {
 187     /*@editable*/ background-color:#F4F4F4;
 188     /*@editable*/ border-top:1px solid #FFFFFF;
 189     /*@editable*/ border-bottom:1px solid #CCCCCC;
 190 }
 191
 192 /**
 193 * @tab Header
 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.
 196 */
 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;
 209 }
 210
 211 /**
 212 * @tab Header
 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.
 215 */
 216 .roo-m-header-content a:link,
 217 .roo-m-header-content a:visited,
 218 .roo-m-header-content a .yshortcuts /* Yahoo! Mail Override */
 219 {
 220     /*@editable*/ color:#EB4102;
 221     /*@editable*/ font-weight:normal;
 222     /*@editable*/ text-decoration:underline;
 223 }
 224
 225 .roo-m-header-content > img {
 226     height:auto;
 227     max-width:600px;
 228 }
 229
 230 /* ========== Body Styles ========== */
 231
 232 /**
 233 * @tab Body
 234 * @section body style
 235 * @tip Set the background color and borders for your email's body area.
 236 */
 237 .roo-m-body {
 238     /*@editable*/ background-color:#F4F4F4;
 239     /*@editable*/ border-top:1px solid #FFFFFF;
 240     /*@editable*/ border-bottom:1px solid #CCCCCC;
 241 }
 242
 243 /**
 244 * @tab Body
 245 * @section body text
 246 * @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
 247 * @theme main
 248 */
 249 .roo-m-body-content {
 250     /*@editable*/ color:#505050;
 251     /*@editable*/ font-family:Helvetica;
 252     /*@editable*/ font-size:16px;
 253     /*@editable*/ line-height:150%;
 254     padding-top:20px;
 255     padding-right:20px;
 256     padding-bottom:20px;
 257     padding-left:20px;
 258     /*@editable*/ text-align:left;
 259 }
 260
 261 /**
 262 * @tab Body
 263 * @section body link
 264 * @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
 265 */
 266 .roo-m-body-content a:link,
 267 .roo-m-body-content a:visited,
 268 .roo-m-body-content a .yshortcuts /* Yahoo! Mail Override */
 269 {
 270     /*@editable*/ color:#EB4102;
 271     /*@editable*/ font-weight:normal;
 272     /*@editable*/ text-decoration:underline;
 273 }
 274
 275 .roo-m-body-content img{
 276     display:inline;
 277     height:auto;
 278     max-width:560px;
 279 }
 280
 281 /* ========== Column Styles ========== */
 282
 283 .roo-m-column {width:260px;}
 284
 285 /**
 286 * @tab Columns
 287 * @section column style
 288 * @tip Set the background color and borders for your email's column area.
 289 */
 290 .roo-m-column {
 291     /*@editable*/ background-color:#F4F4F4;
 292     /*@editable*/ border-top:1px solid #FFFFFF;
 293     /*@editable*/ border-bottom:1px solid #CCCCCC;
 294 }
 295
 296 /**
 297 * @tab Columns
 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.
 300 */
 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%;
 306     padding-top:0;
 307     padding-right:20px;
 308     padding-bottom:20px;
 309     padding-left:20px;
 310     /*@editable*/ text-align:left;
 311 }
 312
 313 /**
 314 * @tab Columns
 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.
 317 */
 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 */
 321 {
 322     /*@editable*/ color:#EB4102;
 323     /*@editable*/ font-weight:normal;
 324     /*@editable*/ text-decoration:underline;
 325 }
 326
 327 /**
 328 * @tab Columns
 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.
 331 */
 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%;
 337     padding-top:0;
 338     padding-right:20px;
 339     padding-bottom:20px;
 340     padding-left:20px;
 341     /*@editable*/ text-align:left;
 342 }
 343
 344 /**
 345 * @tab Columns
 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.
 348 */
 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;
 355 }
 356
 357 .roo-m-column-left-content img,
 358 .roo-m-column-right-content img{
 359     display:inline;
 360     height:auto;
 361     max-width:260px;
 362 }
 363
 364 /* ========== Footer Styles ========== */
 365
 366 /**
 367 * @tab Footer
 368 * @section footer style
 369 * @tip Set the background color and borders for your email's footer area.
 370 * @theme footer
 371 */
 372 .roo-m-footer {
 373     /*@editable*/ background-color:#F4F4F4;
 374     /*@editable*/ border-top:1px solid #FFFFFF;
 375 }
 376
 377 /**
 378 * @tab Footer
 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.
 381 * @theme footer
 382 */
 383 .roo-m-footer-content {
 384     /*@editable*/ color:#808080;
 385     /*@editable*/ font-family:Helvetica;
 386     /*@editable*/ font-size:10px;
 387     /*@editable*/ line-height:150%;
 388     padding-top:20px;
 389     padding-right:20px;
 390     padding-bottom:20px;
 391     padding-left:20px;
 392     /*@editable*/ text-align:left;
 393 }
 394
 395 /**
 396 * @tab Footer
 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.
 399 */
 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 */
 404 {
 405     /*@editable*/ color:#606060;
 406     /*@editable*/ font-weight:normal;
 407     /*@editable*/ text-decoration:underline;
 408 }
 409
 410 /* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */
 411
 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 */
 416
 417     /* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
 418     .roo-m-body-cell{padding:10px !important;}
 419
 420     /* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
 421
 422     /* ======== Page Styles ======== */
 423
 424     /**
 425     * @tab Mobile 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.
 428     */
 429
 430     .roo-m-body-container{
 431         max-width:480px !important;
 432         /*@editable*/ width:100% !important;
 433     }
 434
 435     /**
 436     * @tab Mobile Styles
 437     * @section heading 1
 438     * @tip Make the first-level headings larger in size for better readability on small screens.
 439     */
 440     h1{
 441         /*@editable*/ font-size:24px !important;
 442         /*@editable*/ line-height:100% !important;
 443     }
 444
 445     /**
 446     * @tab Mobile Styles
 447     * @section heading 2
 448     * @tip Make the second-level headings larger in size for better readability on small screens.
 449     */
 450     h2{
 451         /*@editable*/ font-size:20px !important;
 452         /*@editable*/ line-height:100% !important;
 453     }
 454
 455     /**
 456     * @tab Mobile Styles
 457     * @section heading 3
 458     * @tip Make the third-level headings larger in size for better readability on small screens.
 459     */
 460     h3{
 461         /*@editable*/ font-size:18px !important;
 462         /*@editable*/ line-height:100% !important;
 463     }
 464
 465     /**
 466     * @tab Mobile Styles
 467     * @section heading 4
 468     * @tip Make the fourth-level headings larger in size for better readability on small screens.
 469     */
 470     h4{
 471         /*@editable*/ font-size:16px !important;
 472         /*@editable*/ line-height:100% !important;
 473     }
 474
 475     /* ======== Header Styles ======== */
 476
 477     .roo-m-preheader{display:none !important;} /* Hide the template preheader to save space */
 478
 479     /**
 480     * @tab Mobile Styles
 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.
 483     */
 484     .roo-m-header > img{
 485         height:auto !important;
 486         /*@editable*/ max-width:420px !important;
 487         /*@editable*/ width:100% !important;
 488     }
 489
 490     /**
 491     * @tab Mobile Styles
 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.
 494     */
 495     .roo-m-header-content{
 496         /*@editable*/ font-size:20px !important;
 497         /*@editable*/ line-height:125% !important;
 498     }
 499
 500     /* ======== Body Styles ======== */
 501
 502     /**
 503     * @tab Mobile Styles
 504     * @section body text
 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.
 506     */
 507     .roo-m-body-content
 508     {
 509         /*@editable*/ font-size:18px !important;
 510         /*@editable*/ line-height:125% !important;
 511     }
 512
 513     /* ======== Column Styles ======== */
 514
 515     .roo-m-column {display:block !important; width:100% !important;}
 516
 517     /**
 518     * @tab Mobile Styles
 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.
 521     */
 522     .roo-m-column-image,
 523     .roo-m-body-content img
 524     {
 525         height:auto !important;
 526         /*@editable*/ max-width:420px !important;
 527         /*@editable*/ width:100% !important;
 528     }
 529
 530     /**
 531     * @tab Mobile Styles
 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.
 534     */
 535     .roo-m-column-left-content{
 536         /*@editable*/ font-size:16px !important;
 537         /*@editable*/ line-height:125% !important;
 538     }
 539
 540     /**
 541     * @tab Mobile Styles
 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.
 544     */
 545     .roo-m-column-right-content{
 546         /*@editable*/ font-size:16px !important;
 547         /*@editable*/ line-height:125% !important;
 548     }
 549
 550     /* ======== Footer Styles ======== */
 551
 552     /**
 553     * @tab Mobile Styles
 554     * @section footer text
 555     * @tip Make the body content text larger in size for better readability on small screens.
 556     */
 557     .roo-m-column-footer-content{
 558         /*@editable*/ font-size:14px !important;
 559         /*@editable*/ line-height:115% !important;
 560     }
 561
 562     .roo-m-column-footer-content a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
 563 }