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

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