├── LICENSE.md ├── README.md ├── UPGRADE.md ├── composer.json ├── config ├── services.yaml └── services │ ├── parser.yaml │ ├── service.yaml │ └── twig.yaml ├── public └── css │ └── foundation-for-emails │ ├── foundation.css │ └── foundation.min.css ├── src ├── Collector │ └── CssCollector.php ├── DependencyInjection │ └── EmailizrExtension.php ├── EmailizrBundle.php ├── Parser │ ├── InkyParser.php │ └── InlineStyleParser.php ├── Service │ └── ContentService.php └── Twig │ ├── Extension │ └── InlineStyleExtension.php │ ├── Node │ └── InlineStyleNode.php │ └── Parser │ └── InlineStyleTokenParser.php └── templates └── layout.html.twig /LICENSE.md: -------------------------------------------------------------------------------- 1 | # License 2 | Copyright (C) DACHCOM.DIGITAL 3 | 4 | This software is available under two different licenses: 5 | * GNU General Public License version 3 (GPLv3) as Pimcore Community Edition 6 | * DACHCOM Commercial License (DCL) 7 | 8 | The default Emailizr Bundle license, without a valid DACHCOM Commercial License agreement, is the Open-Source GPLv3 license. 9 | 10 | ## GNU General Public License version 3 (GPLv3) 11 | If you decide to choose the GPLv3 license, you must comply with the following terms: 12 | 13 | This program is free software: you can redistribute it and/or modify 14 | it under the terms of the GNU General Public License as published by 15 | the Free Software Foundation, either version 3 of the License, or 16 | (at your option) any later version. 17 | 18 | This program is distributed in the hope that it will be useful, 19 | but WITHOUT ANY WARRANTY; without even the implied warranty of 20 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 21 | GNU General Public License for more details. 22 | 23 | You should have received a copy of the GNU General Public License 24 | along with this program. If not, see . 25 | 26 | ## DACHCOM Commercial License (DCL) 27 | Alternatively, commercial and supported versions of the program - also known as 28 | Commercial Distributions - must be used in accordance with the terms and conditions 29 | contained in a separate written agreement between you and DACHCOM.DIGITAL AG. 30 | For more information about the Emailizr Bundle Commercial License (DCL) please contact dcdi@dachcom.ch. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Pimcore Emailizr 2 | 3 | [![Software License](https://img.shields.io/badge/license-GPLv3-brightgreen.svg?style=flat-square)](LICENSE.md) 4 | [![Software License](https://img.shields.io/badge/license-DCL-white.svg?style=flat-square&color=%23ff5c5c)](LICENSE.md) 5 | [![Latest Release](https://img.shields.io/packagist/v/dachcom-digital/emailizr.svg?style=flat-square)](https://packagist.org/packages/dachcom-digital/emailizr) 6 | [![Tests](https://img.shields.io/github/actions/workflow/status/dachcom-digital/pimcore-emailizr/.github/workflows/codeception.yml?branch=master&style=flat-square&logo=github&label=codeception)](https://github.com/dachcom-digital/pimcore-emailizr/actions?query=workflow%3A%22Codeception%22) 7 | [![PhpStan](https://img.shields.io/github/actions/workflow/status/dachcom-digital/pimcore-dynamic-search/.github/workflows/php-stan.yml?branch=master&style=flat-square&logo=github&label=phpstan%20level%204)](https://github.com/dachcom-digital/pimcore-emailizr/actions?query=workflow%3A%22PHP%20Stan%22) 8 | 9 | ### Requirements 10 | - Pimcore ^11.4 11 | - PHP >= 8.1 12 | - Twig >= 3.9 13 | 14 | ### Release Plan 15 | 16 | | Release | Supported Pimcore Versions | Supported Symfony Versions | Release Date | Maintained | Branch | 17 | |-----------|----------------------------|----------------------------|--------------|----------------|---------------------------------------------------------------------| 18 | | **>=3.1** | `11.4` | `^6.4` | 08.01.2025 | Feature Branch | master | 19 | | **3.x** | `11.0` | `^6.2` | 30.08.2023 | Feature Branch | master | 20 | | **2.x** | `10.1` - `10.6` | `^5.4` | 21.09.2021 | No | [2.x](https://github.com/dachcom-digital/pimcore-emailizr/tree/2.x) | 21 | | **1.x** | `6.0` - `6.9` | `3.4`, `^4.4` | 06.12.2017 | No | [1.x](https://github.com/dachcom-digital/pimcore-emailizr/tree/1.x) | 22 | 23 | ## Installation 24 | 25 | ```json 26 | "require" : { 27 | "dachcom-digital/emailizr" : "~3.2.0", 28 | } 29 | ``` 30 | 31 | Add Bundle to `bundles.php`: 32 | ```php 33 | return [ 34 | EmailizrBundle\EmailizrBundle::class => ['all' => true], 35 | ]; 36 | ``` 37 | 38 | - Create valid email markup with inky and inline styles. 39 | - Respect editables in pimcore edit mode. 40 | 41 | ## Usage 42 | Just extend the emailizr layout: 43 | 44 | ```twig 45 | {% extends '@Emailizr/layout.html.twig' %} 46 | ``` 47 | 48 | This will include a markup like this. You may want to change it: 49 | ```twig 50 | {% apply spaceless %} 51 | {{ emailizr_style_collector.add('@EmailizrBundle/public/css/foundation-for-emails/foundation.min.css') }} 52 | {% emailizr_inline_style %} 53 | 54 | 55 | 56 | 57 | 58 | {% block headStyles %} 59 | 64 | {% endblock %} 65 | 66 | {% apply inky_to_html %} 67 | 68 | {% block body %} 69 | 70 | 71 | 77 | 78 |
72 |
73 | {% block content %} 74 | {% endblock %} 75 |
76 |
79 | 80 |
                                                           
81 | {% endblock %} 82 | 83 | {% endapply %} 84 | 85 | {% end_emailizr_inline_style %} 86 | {% endapply %} 87 | ``` 88 | 89 | ### Service 90 | If you need to parse values in a custom context, you may use the ContentService. 91 | 92 | ```php 93 | contentService->checkContent($content, $cssFile, FALSE, TRUE, TRUE); 108 | } 109 | } 110 | ``` 111 | 112 | ### Further Information 113 | - [Use Emailizr with FormBuilder](docs/10_FormBuilder.md) 114 | 115 | ## Upgrade Info 116 | Before updating, please [check our upgrade notes!](UPGRADE.md) 117 | 118 | ## License 119 | **DACHCOM.DIGITAL AG**, Löwenhofstrasse 15, 9424 Rheineck, Schweiz 120 | [dachcom.com](https://www.dachcom.com), dcdi@dachcom.ch 121 | Copyright © 2025 DACHCOM.DIGITAL. All rights reserved. 122 | 123 | For licensing details please visit [LICENSE.md](LICENSE.md) -------------------------------------------------------------------------------- /UPGRADE.md: -------------------------------------------------------------------------------- 1 | # Upgrade Notes 2 | 3 | ## Version 3.2.0 4 | - Pimcore >= 11.4 Support only 5 | - [LICENSE] Dual-License with GPL and Dachcom Commercial License (DCL) added 6 | 7 | ## Version 3.1.0 8 | Starting with 3.1, Emailizr only supports Twig 3.9 9 | 10 | ## Migrating from Version 2.x to Version 3.0.0 11 | - Pimcore 11.0 support only 12 | - PHP >= 8.1 support only 13 | - [NEW FEATURE][BC BREAK] We're now using the symfony [inky parser](https://twig.symfony.com/doc/2.x/filters/inky_to_html.html) instead of `lorenzo/pinky` (which will be used by twig, but we want to stick with Symfony's recommended stack). 14 | - replace `{% emailizr_inky %}` with `{% apply inky_to_html %}` 15 | - replace `{% end_emailizr_inky %}` with `{% endapply %}` 16 | - [BC BREAK] `@Emailizr/layout.html.twig` is using inky markup by default 17 | - [BC BREAK] Include path `@EmailizrBundle/Resources/public/[...]` changed to `@EmailizrBundle/public/[...]`. Please change your includes accordingly 18 | 19 | *** 20 | 21 | Emailizr 2.x Upgrade Notes: https://github.com/dachcom-digital/pimcore-emailizr/blob/2.x/UPGRADE.md 22 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dachcom-digital/emailizr", 3 | "type": "pimcore-bundle", 4 | "license": [ 5 | "GPL-3.0-or-later", 6 | "proprietary" 7 | ], 8 | "description": "Pimcore Emailizr - create html emails the right way!", 9 | "keywords": ["pimcore", "email", "inky", "inline style"], 10 | "homepage": "https://github.com/dachcom-digital/pimcore-emailizr", 11 | "authors": [ 12 | { 13 | "name": "DACHCOM.DIGITAL Stefan Hagspiel", 14 | "email": "shagspiel@dachcom.ch", 15 | "homepage": "https://www.dachcom.com", 16 | "role": "Developer" 17 | } 18 | ], 19 | "autoload": { 20 | "psr-4": { 21 | "EmailizrBundle\\": "src/" 22 | } 23 | }, 24 | "autoload-dev": { 25 | "psr-4": { 26 | "": "src/" 27 | } 28 | }, 29 | "extra": { 30 | "pimcore": { 31 | "bundles": [ 32 | "EmailizrBundle\\EmailizrBundle" 33 | ] 34 | } 35 | }, 36 | "require": { 37 | "pimcore/pimcore": "^11.4", 38 | "twig/twig": "^3.14", 39 | "twig/inky-extra": "^3.0", 40 | "pelago/emogrifier": "^7.0" 41 | }, 42 | "require-dev": { 43 | "codeception/codeception": "^5.0", 44 | "codeception/module-symfony": "^3.1", 45 | "phpstan/phpstan": "^2.0", 46 | "phpstan/phpstan-symfony": "^2.0", 47 | "symplify/easy-coding-standard": "~12.2.0" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /config/services.yaml: -------------------------------------------------------------------------------- 1 | imports: 2 | - { resource: services/*.yaml } -------------------------------------------------------------------------------- /config/services/parser.yaml: -------------------------------------------------------------------------------- 1 | services: 2 | 3 | _defaults: 4 | autowire: true 5 | autoconfigure: true 6 | public: false 7 | 8 | EmailizrBundle\Parser\InkyParser: ~ 9 | 10 | EmailizrBundle\Parser\InlineStyleParser: ~ -------------------------------------------------------------------------------- /config/services/service.yaml: -------------------------------------------------------------------------------- 1 | services: 2 | 3 | _defaults: 4 | autowire: true 5 | autoconfigure: true 6 | public: false 7 | 8 | EmailizrBundle\Service\ContentService: ~ -------------------------------------------------------------------------------- /config/services/twig.yaml: -------------------------------------------------------------------------------- 1 | services: 2 | 3 | _defaults: 4 | autowire: true 5 | autoconfigure: true 6 | public: false 7 | 8 | EmailizrBundle\Twig\Extension\InlineStyleExtension: 9 | tags: 10 | - { name: twig.extension } -------------------------------------------------------------------------------- /public/css/foundation-for-emails/foundation.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | width: 100%; } 3 | 4 | #outlook a { 5 | padding: 0; } 6 | 7 | body { 8 | width: 100% !important; 9 | min-width: 100%; 10 | -webkit-text-size-adjust: 100%; 11 | -ms-text-size-adjust: 100%; 12 | margin: 0; 13 | Margin: 0; 14 | padding: 0; 15 | -moz-box-sizing: border-box; 16 | -webkit-box-sizing: border-box; 17 | box-sizing: border-box; } 18 | 19 | .ExternalClass { 20 | width: 100%; } 21 | .ExternalClass, 22 | .ExternalClass p, 23 | .ExternalClass span, 24 | .ExternalClass font, 25 | .ExternalClass td, 26 | .ExternalClass div { 27 | line-height: 100%; } 28 | 29 | #backgroundTable { 30 | margin: 0; 31 | Margin: 0; 32 | padding: 0; 33 | width: 100% !important; 34 | line-height: 100% !important; } 35 | 36 | img { 37 | outline: none; 38 | text-decoration: none; 39 | -ms-interpolation-mode: bicubic; 40 | width: auto; 41 | max-width: 100%; 42 | clear: both; 43 | display: block; } 44 | 45 | center { 46 | width: 100%; 47 | min-width: 580px; } 48 | 49 | a img { 50 | border: none; } 51 | 52 | p { 53 | margin: 0 0 0 10px; 54 | Margin: 0 0 0 10px; } 55 | 56 | table { 57 | border-spacing: 0; 58 | border-collapse: collapse; } 59 | 60 | td { 61 | word-wrap: break-word; 62 | -webkit-hyphens: auto; 63 | -moz-hyphens: auto; 64 | hyphens: auto; 65 | border-collapse: collapse !important; } 66 | 67 | table, tr, td { 68 | padding: 0; 69 | vertical-align: top; 70 | text-align: left; } 71 | 72 | @media only screen { 73 | html { 74 | min-height: 100%; 75 | background: #f3f3f3; } } 76 | 77 | table.body { 78 | background: #f3f3f3; 79 | height: 100%; 80 | width: 100%; } 81 | 82 | table.container { 83 | background: #fefefe; 84 | width: 580px; 85 | margin: 0 auto; 86 | Margin: 0 auto; 87 | text-align: inherit; } 88 | 89 | table.row { 90 | padding: 0; 91 | width: 100%; 92 | position: relative; } 93 | 94 | table.spacer { 95 | width: 100%; } 96 | table.spacer td { 97 | mso-line-height-rule: exactly; } 98 | 99 | table.container table.row { 100 | display: table; } 101 | 102 | td.columns, 103 | td.column, 104 | th.columns, 105 | th.column { 106 | margin: 0 auto; 107 | Margin: 0 auto; 108 | padding-left: 16px; 109 | padding-bottom: 16px; } 110 | td.columns .column, 111 | td.columns .columns, 112 | td.column .column, 113 | td.column .columns, 114 | th.columns .column, 115 | th.columns .columns, 116 | th.column .column, 117 | th.column .columns { 118 | padding-left: 0 !important; 119 | padding-right: 0 !important; } 120 | td.columns .column center, 121 | td.columns .columns center, 122 | td.column .column center, 123 | td.column .columns center, 124 | th.columns .column center, 125 | th.columns .columns center, 126 | th.column .column center, 127 | th.column .columns center { 128 | min-width: none !important; } 129 | 130 | td.columns.last, 131 | td.column.last, 132 | th.columns.last, 133 | th.column.last { 134 | padding-right: 16px; } 135 | 136 | td.columns table:not(.button), 137 | td.column table:not(.button), 138 | th.columns table:not(.button), 139 | th.column table:not(.button) { 140 | width: 100%; } 141 | 142 | td.large-1, 143 | th.large-1 { 144 | width: 32.33333px; 145 | padding-left: 8px; 146 | padding-right: 8px; } 147 | 148 | td.large-1.first, 149 | th.large-1.first { 150 | padding-left: 16px; } 151 | 152 | td.large-1.last, 153 | th.large-1.last { 154 | padding-right: 16px; } 155 | 156 | .collapse > tbody > tr > td.large-1, 157 | .collapse > tbody > tr > th.large-1 { 158 | padding-right: 0; 159 | padding-left: 0; 160 | width: 48.33333px; } 161 | 162 | .collapse td.large-1.first, 163 | .collapse th.large-1.first, 164 | .collapse td.large-1.last, 165 | .collapse th.large-1.last { 166 | width: 56.33333px; } 167 | 168 | td.large-1 center, 169 | th.large-1 center { 170 | min-width: 0.33333px; } 171 | 172 | .body .columns td.large-1, 173 | .body .column td.large-1, 174 | .body .columns th.large-1, 175 | .body .column th.large-1 { 176 | width: 8.33333%; } 177 | 178 | td.large-2, 179 | th.large-2 { 180 | width: 80.66667px; 181 | padding-left: 8px; 182 | padding-right: 8px; } 183 | 184 | td.large-2.first, 185 | th.large-2.first { 186 | padding-left: 16px; } 187 | 188 | td.large-2.last, 189 | th.large-2.last { 190 | padding-right: 16px; } 191 | 192 | .collapse > tbody > tr > td.large-2, 193 | .collapse > tbody > tr > th.large-2 { 194 | padding-right: 0; 195 | padding-left: 0; 196 | width: 96.66667px; } 197 | 198 | .collapse td.large-2.first, 199 | .collapse th.large-2.first, 200 | .collapse td.large-2.last, 201 | .collapse th.large-2.last { 202 | width: 104.66667px; } 203 | 204 | td.large-2 center, 205 | th.large-2 center { 206 | min-width: 48.66667px; } 207 | 208 | .body .columns td.large-2, 209 | .body .column td.large-2, 210 | .body .columns th.large-2, 211 | .body .column th.large-2 { 212 | width: 16.66667%; } 213 | 214 | td.large-3, 215 | th.large-3 { 216 | width: 129px; 217 | padding-left: 8px; 218 | padding-right: 8px; } 219 | 220 | td.large-3.first, 221 | th.large-3.first { 222 | padding-left: 16px; } 223 | 224 | td.large-3.last, 225 | th.large-3.last { 226 | padding-right: 16px; } 227 | 228 | .collapse > tbody > tr > td.large-3, 229 | .collapse > tbody > tr > th.large-3 { 230 | padding-right: 0; 231 | padding-left: 0; 232 | width: 145px; } 233 | 234 | .collapse td.large-3.first, 235 | .collapse th.large-3.first, 236 | .collapse td.large-3.last, 237 | .collapse th.large-3.last { 238 | width: 153px; } 239 | 240 | td.large-3 center, 241 | th.large-3 center { 242 | min-width: 97px; } 243 | 244 | .body .columns td.large-3, 245 | .body .column td.large-3, 246 | .body .columns th.large-3, 247 | .body .column th.large-3 { 248 | width: 25%; } 249 | 250 | td.large-4, 251 | th.large-4 { 252 | width: 177.33333px; 253 | padding-left: 8px; 254 | padding-right: 8px; } 255 | 256 | td.large-4.first, 257 | th.large-4.first { 258 | padding-left: 16px; } 259 | 260 | td.large-4.last, 261 | th.large-4.last { 262 | padding-right: 16px; } 263 | 264 | .collapse > tbody > tr > td.large-4, 265 | .collapse > tbody > tr > th.large-4 { 266 | padding-right: 0; 267 | padding-left: 0; 268 | width: 193.33333px; } 269 | 270 | .collapse td.large-4.first, 271 | .collapse th.large-4.first, 272 | .collapse td.large-4.last, 273 | .collapse th.large-4.last { 274 | width: 201.33333px; } 275 | 276 | td.large-4 center, 277 | th.large-4 center { 278 | min-width: 145.33333px; } 279 | 280 | .body .columns td.large-4, 281 | .body .column td.large-4, 282 | .body .columns th.large-4, 283 | .body .column th.large-4 { 284 | width: 33.33333%; } 285 | 286 | td.large-5, 287 | th.large-5 { 288 | width: 225.66667px; 289 | padding-left: 8px; 290 | padding-right: 8px; } 291 | 292 | td.large-5.first, 293 | th.large-5.first { 294 | padding-left: 16px; } 295 | 296 | td.large-5.last, 297 | th.large-5.last { 298 | padding-right: 16px; } 299 | 300 | .collapse > tbody > tr > td.large-5, 301 | .collapse > tbody > tr > th.large-5 { 302 | padding-right: 0; 303 | padding-left: 0; 304 | width: 241.66667px; } 305 | 306 | .collapse td.large-5.first, 307 | .collapse th.large-5.first, 308 | .collapse td.large-5.last, 309 | .collapse th.large-5.last { 310 | width: 249.66667px; } 311 | 312 | td.large-5 center, 313 | th.large-5 center { 314 | min-width: 193.66667px; } 315 | 316 | .body .columns td.large-5, 317 | .body .column td.large-5, 318 | .body .columns th.large-5, 319 | .body .column th.large-5 { 320 | width: 41.66667%; } 321 | 322 | td.large-6, 323 | th.large-6 { 324 | width: 274px; 325 | padding-left: 8px; 326 | padding-right: 8px; } 327 | 328 | td.large-6.first, 329 | th.large-6.first { 330 | padding-left: 16px; } 331 | 332 | td.large-6.last, 333 | th.large-6.last { 334 | padding-right: 16px; } 335 | 336 | .collapse > tbody > tr > td.large-6, 337 | .collapse > tbody > tr > th.large-6 { 338 | padding-right: 0; 339 | padding-left: 0; 340 | width: 290px; } 341 | 342 | .collapse td.large-6.first, 343 | .collapse th.large-6.first, 344 | .collapse td.large-6.last, 345 | .collapse th.large-6.last { 346 | width: 298px; } 347 | 348 | td.large-6 center, 349 | th.large-6 center { 350 | min-width: 242px; } 351 | 352 | .body .columns td.large-6, 353 | .body .column td.large-6, 354 | .body .columns th.large-6, 355 | .body .column th.large-6 { 356 | width: 50%; } 357 | 358 | td.large-7, 359 | th.large-7 { 360 | width: 322.33333px; 361 | padding-left: 8px; 362 | padding-right: 8px; } 363 | 364 | td.large-7.first, 365 | th.large-7.first { 366 | padding-left: 16px; } 367 | 368 | td.large-7.last, 369 | th.large-7.last { 370 | padding-right: 16px; } 371 | 372 | .collapse > tbody > tr > td.large-7, 373 | .collapse > tbody > tr > th.large-7 { 374 | padding-right: 0; 375 | padding-left: 0; 376 | width: 338.33333px; } 377 | 378 | .collapse td.large-7.first, 379 | .collapse th.large-7.first, 380 | .collapse td.large-7.last, 381 | .collapse th.large-7.last { 382 | width: 346.33333px; } 383 | 384 | td.large-7 center, 385 | th.large-7 center { 386 | min-width: 290.33333px; } 387 | 388 | .body .columns td.large-7, 389 | .body .column td.large-7, 390 | .body .columns th.large-7, 391 | .body .column th.large-7 { 392 | width: 58.33333%; } 393 | 394 | td.large-8, 395 | th.large-8 { 396 | width: 370.66667px; 397 | padding-left: 8px; 398 | padding-right: 8px; } 399 | 400 | td.large-8.first, 401 | th.large-8.first { 402 | padding-left: 16px; } 403 | 404 | td.large-8.last, 405 | th.large-8.last { 406 | padding-right: 16px; } 407 | 408 | .collapse > tbody > tr > td.large-8, 409 | .collapse > tbody > tr > th.large-8 { 410 | padding-right: 0; 411 | padding-left: 0; 412 | width: 386.66667px; } 413 | 414 | .collapse td.large-8.first, 415 | .collapse th.large-8.first, 416 | .collapse td.large-8.last, 417 | .collapse th.large-8.last { 418 | width: 394.66667px; } 419 | 420 | td.large-8 center, 421 | th.large-8 center { 422 | min-width: 338.66667px; } 423 | 424 | .body .columns td.large-8, 425 | .body .column td.large-8, 426 | .body .columns th.large-8, 427 | .body .column th.large-8 { 428 | width: 66.66667%; } 429 | 430 | td.large-9, 431 | th.large-9 { 432 | width: 419px; 433 | padding-left: 8px; 434 | padding-right: 8px; } 435 | 436 | td.large-9.first, 437 | th.large-9.first { 438 | padding-left: 16px; } 439 | 440 | td.large-9.last, 441 | th.large-9.last { 442 | padding-right: 16px; } 443 | 444 | .collapse > tbody > tr > td.large-9, 445 | .collapse > tbody > tr > th.large-9 { 446 | padding-right: 0; 447 | padding-left: 0; 448 | width: 435px; } 449 | 450 | .collapse td.large-9.first, 451 | .collapse th.large-9.first, 452 | .collapse td.large-9.last, 453 | .collapse th.large-9.last { 454 | width: 443px; } 455 | 456 | td.large-9 center, 457 | th.large-9 center { 458 | min-width: 387px; } 459 | 460 | .body .columns td.large-9, 461 | .body .column td.large-9, 462 | .body .columns th.large-9, 463 | .body .column th.large-9 { 464 | width: 75%; } 465 | 466 | td.large-10, 467 | th.large-10 { 468 | width: 467.33333px; 469 | padding-left: 8px; 470 | padding-right: 8px; } 471 | 472 | td.large-10.first, 473 | th.large-10.first { 474 | padding-left: 16px; } 475 | 476 | td.large-10.last, 477 | th.large-10.last { 478 | padding-right: 16px; } 479 | 480 | .collapse > tbody > tr > td.large-10, 481 | .collapse > tbody > tr > th.large-10 { 482 | padding-right: 0; 483 | padding-left: 0; 484 | width: 483.33333px; } 485 | 486 | .collapse td.large-10.first, 487 | .collapse th.large-10.first, 488 | .collapse td.large-10.last, 489 | .collapse th.large-10.last { 490 | width: 491.33333px; } 491 | 492 | td.large-10 center, 493 | th.large-10 center { 494 | min-width: 435.33333px; } 495 | 496 | .body .columns td.large-10, 497 | .body .column td.large-10, 498 | .body .columns th.large-10, 499 | .body .column th.large-10 { 500 | width: 83.33333%; } 501 | 502 | td.large-11, 503 | th.large-11 { 504 | width: 515.66667px; 505 | padding-left: 8px; 506 | padding-right: 8px; } 507 | 508 | td.large-11.first, 509 | th.large-11.first { 510 | padding-left: 16px; } 511 | 512 | td.large-11.last, 513 | th.large-11.last { 514 | padding-right: 16px; } 515 | 516 | .collapse > tbody > tr > td.large-11, 517 | .collapse > tbody > tr > th.large-11 { 518 | padding-right: 0; 519 | padding-left: 0; 520 | width: 531.66667px; } 521 | 522 | .collapse td.large-11.first, 523 | .collapse th.large-11.first, 524 | .collapse td.large-11.last, 525 | .collapse th.large-11.last { 526 | width: 539.66667px; } 527 | 528 | td.large-11 center, 529 | th.large-11 center { 530 | min-width: 483.66667px; } 531 | 532 | .body .columns td.large-11, 533 | .body .column td.large-11, 534 | .body .columns th.large-11, 535 | .body .column th.large-11 { 536 | width: 91.66667%; } 537 | 538 | td.large-12, 539 | th.large-12 { 540 | width: 564px; 541 | padding-left: 8px; 542 | padding-right: 8px; } 543 | 544 | td.large-12.first, 545 | th.large-12.first { 546 | padding-left: 16px; } 547 | 548 | td.large-12.last, 549 | th.large-12.last { 550 | padding-right: 16px; } 551 | 552 | .collapse > tbody > tr > td.large-12, 553 | .collapse > tbody > tr > th.large-12 { 554 | padding-right: 0; 555 | padding-left: 0; 556 | width: 580px; } 557 | 558 | .collapse td.large-12.first, 559 | .collapse th.large-12.first, 560 | .collapse td.large-12.last, 561 | .collapse th.large-12.last { 562 | width: 588px; } 563 | 564 | td.large-12 center, 565 | th.large-12 center { 566 | min-width: 532px; } 567 | 568 | .body .columns td.large-12, 569 | .body .column td.large-12, 570 | .body .columns th.large-12, 571 | .body .column th.large-12 { 572 | width: 100%; } 573 | 574 | td.large-offset-1, 575 | td.large-offset-1.first, 576 | td.large-offset-1.last, 577 | th.large-offset-1, 578 | th.large-offset-1.first, 579 | th.large-offset-1.last { 580 | padding-left: 64.33333px; } 581 | 582 | td.large-offset-2, 583 | td.large-offset-2.first, 584 | td.large-offset-2.last, 585 | th.large-offset-2, 586 | th.large-offset-2.first, 587 | th.large-offset-2.last { 588 | padding-left: 112.66667px; } 589 | 590 | td.large-offset-3, 591 | td.large-offset-3.first, 592 | td.large-offset-3.last, 593 | th.large-offset-3, 594 | th.large-offset-3.first, 595 | th.large-offset-3.last { 596 | padding-left: 161px; } 597 | 598 | td.large-offset-4, 599 | td.large-offset-4.first, 600 | td.large-offset-4.last, 601 | th.large-offset-4, 602 | th.large-offset-4.first, 603 | th.large-offset-4.last { 604 | padding-left: 209.33333px; } 605 | 606 | td.large-offset-5, 607 | td.large-offset-5.first, 608 | td.large-offset-5.last, 609 | th.large-offset-5, 610 | th.large-offset-5.first, 611 | th.large-offset-5.last { 612 | padding-left: 257.66667px; } 613 | 614 | td.large-offset-6, 615 | td.large-offset-6.first, 616 | td.large-offset-6.last, 617 | th.large-offset-6, 618 | th.large-offset-6.first, 619 | th.large-offset-6.last { 620 | padding-left: 306px; } 621 | 622 | td.large-offset-7, 623 | td.large-offset-7.first, 624 | td.large-offset-7.last, 625 | th.large-offset-7, 626 | th.large-offset-7.first, 627 | th.large-offset-7.last { 628 | padding-left: 354.33333px; } 629 | 630 | td.large-offset-8, 631 | td.large-offset-8.first, 632 | td.large-offset-8.last, 633 | th.large-offset-8, 634 | th.large-offset-8.first, 635 | th.large-offset-8.last { 636 | padding-left: 402.66667px; } 637 | 638 | td.large-offset-9, 639 | td.large-offset-9.first, 640 | td.large-offset-9.last, 641 | th.large-offset-9, 642 | th.large-offset-9.first, 643 | th.large-offset-9.last { 644 | padding-left: 451px; } 645 | 646 | td.large-offset-10, 647 | td.large-offset-10.first, 648 | td.large-offset-10.last, 649 | th.large-offset-10, 650 | th.large-offset-10.first, 651 | th.large-offset-10.last { 652 | padding-left: 499.33333px; } 653 | 654 | td.large-offset-11, 655 | td.large-offset-11.first, 656 | td.large-offset-11.last, 657 | th.large-offset-11, 658 | th.large-offset-11.first, 659 | th.large-offset-11.last { 660 | padding-left: 547.66667px; } 661 | 662 | td.expander, 663 | th.expander { 664 | visibility: hidden; 665 | width: 0; 666 | padding: 0 !important; } 667 | 668 | table.container.radius { 669 | border-radius: 0; 670 | border-collapse: separate; } 671 | 672 | .block-grid { 673 | width: 100%; 674 | max-width: 580px; } 675 | .block-grid td { 676 | display: inline-block; 677 | padding: 8px; } 678 | 679 | .up-2 td { 680 | width: 274px !important; } 681 | 682 | .up-3 td { 683 | width: 177px !important; } 684 | 685 | .up-4 td { 686 | width: 129px !important; } 687 | 688 | .up-5 td { 689 | width: 100px !important; } 690 | 691 | .up-6 td { 692 | width: 80px !important; } 693 | 694 | .up-7 td { 695 | width: 66px !important; } 696 | 697 | .up-8 td { 698 | width: 56px !important; } 699 | 700 | table.text-center, 701 | th.text-center, 702 | td.text-center, 703 | h1.text-center, 704 | h2.text-center, 705 | h3.text-center, 706 | h4.text-center, 707 | h5.text-center, 708 | h6.text-center, 709 | p.text-center, 710 | span.text-center { 711 | text-align: center; } 712 | 713 | table.text-left, 714 | th.text-left, 715 | td.text-left, 716 | h1.text-left, 717 | h2.text-left, 718 | h3.text-left, 719 | h4.text-left, 720 | h5.text-left, 721 | h6.text-left, 722 | p.text-left, 723 | span.text-left { 724 | text-align: left; } 725 | 726 | table.text-right, 727 | th.text-right, 728 | td.text-right, 729 | h1.text-right, 730 | h2.text-right, 731 | h3.text-right, 732 | h4.text-right, 733 | h5.text-right, 734 | h6.text-right, 735 | p.text-right, 736 | span.text-right { 737 | text-align: right; } 738 | 739 | span.text-center { 740 | display: block; 741 | width: 100%; 742 | text-align: center; } 743 | 744 | @media only screen and (max-width: 596px) { 745 | .small-float-center { 746 | margin: 0 auto !important; 747 | float: none !important; 748 | text-align: center !important; } 749 | .small-text-center { 750 | text-align: center !important; } 751 | .small-text-left { 752 | text-align: left !important; } 753 | .small-text-right { 754 | text-align: right !important; } } 755 | 756 | img.float-left { 757 | float: left; 758 | text-align: left; } 759 | 760 | img.float-right { 761 | float: right; 762 | text-align: right; } 763 | 764 | img.float-center, 765 | img.text-center { 766 | margin: 0 auto; 767 | Margin: 0 auto; 768 | float: none; 769 | text-align: center; } 770 | 771 | table.float-center, 772 | td.float-center, 773 | th.float-center { 774 | margin: 0 auto; 775 | Margin: 0 auto; 776 | float: none; 777 | text-align: center; } 778 | 779 | .hide-for-large { 780 | display: none !important; 781 | mso-hide: all; 782 | overflow: hidden; 783 | max-height: 0; 784 | font-size: 0; 785 | width: 0; 786 | line-height: 0; } 787 | @media only screen and (max-width: 596px) { 788 | .hide-for-large { 789 | display: block !important; 790 | width: auto !important; 791 | overflow: visible !important; 792 | max-height: none !important; 793 | font-size: inherit !important; 794 | line-height: inherit !important; } } 795 | 796 | table.body table.container .hide-for-large * { 797 | mso-hide: all; } 798 | 799 | @media only screen and (max-width: 596px) { 800 | table.body table.container .hide-for-large, 801 | table.body table.container .row.hide-for-large { 802 | display: table !important; 803 | width: 100% !important; } } 804 | 805 | @media only screen and (max-width: 596px) { 806 | table.body table.container .callout-inner.hide-for-large { 807 | display: table-cell !important; 808 | width: 100% !important; } } 809 | 810 | @media only screen and (max-width: 596px) { 811 | table.body table.container .show-for-large { 812 | display: none !important; 813 | width: 0; 814 | mso-hide: all; 815 | overflow: hidden; } } 816 | 817 | body, 818 | table.body, 819 | h1, 820 | h2, 821 | h3, 822 | h4, 823 | h5, 824 | h6, 825 | p, 826 | td, 827 | th, 828 | a { 829 | color: #0a0a0a; 830 | font-family: Helvetica, Arial, sans-serif; 831 | font-weight: normal; 832 | padding: 0; 833 | margin: 0; 834 | Margin: 0; 835 | text-align: left; 836 | line-height: 1.3; } 837 | 838 | h1, 839 | h2, 840 | h3, 841 | h4, 842 | h5, 843 | h6 { 844 | color: inherit; 845 | word-wrap: normal; 846 | font-family: Helvetica, Arial, sans-serif; 847 | font-weight: normal; 848 | margin-bottom: 10px; 849 | Margin-bottom: 10px; } 850 | 851 | h1 { 852 | font-size: 34px; } 853 | 854 | h2 { 855 | font-size: 30px; } 856 | 857 | h3 { 858 | font-size: 28px; } 859 | 860 | h4 { 861 | font-size: 24px; } 862 | 863 | h5 { 864 | font-size: 20px; } 865 | 866 | h6 { 867 | font-size: 18px; } 868 | 869 | body, 870 | table.body, 871 | p, 872 | td, 873 | th { 874 | font-size: 16px; 875 | line-height: 1.3; } 876 | 877 | p { 878 | margin-bottom: 10px; 879 | Margin-bottom: 10px; } 880 | p.lead { 881 | font-size: 20px; 882 | line-height: 1.6; } 883 | p.subheader { 884 | margin-top: 4px; 885 | margin-bottom: 8px; 886 | Margin-top: 4px; 887 | Margin-bottom: 8px; 888 | font-weight: normal; 889 | line-height: 1.4; 890 | color: #8a8a8a; } 891 | 892 | small { 893 | font-size: 80%; 894 | color: #cacaca; } 895 | 896 | a { 897 | color: #2199e8; 898 | text-decoration: none; } 899 | a:hover { 900 | color: #147dc2; } 901 | a:active { 902 | color: #147dc2; } 903 | a:visited { 904 | color: #2199e8; } 905 | 906 | h1 a, 907 | h1 a:visited, 908 | h2 a, 909 | h2 a:visited, 910 | h3 a, 911 | h3 a:visited, 912 | h4 a, 913 | h4 a:visited, 914 | h5 a, 915 | h5 a:visited, 916 | h6 a, 917 | h6 a:visited { 918 | color: #2199e8; } 919 | 920 | pre { 921 | background: #f3f3f3; 922 | margin: 30px 0; 923 | Margin: 30px 0; } 924 | pre code { 925 | color: #cacaca; } 926 | pre code span.callout { 927 | color: #8a8a8a; 928 | font-weight: bold; } 929 | pre code span.callout-strong { 930 | color: #ff6908; 931 | font-weight: bold; } 932 | 933 | table.hr { 934 | width: 100%; } 935 | table.hr th { 936 | height: 0; 937 | max-width: 580px; 938 | border-top: 0; 939 | border-right: 0; 940 | border-bottom: 1px solid #0a0a0a; 941 | border-left: 0; 942 | margin: 20px auto; 943 | Margin: 20px auto; 944 | clear: both; } 945 | 946 | .stat { 947 | font-size: 40px; 948 | line-height: 1; } 949 | p + .stat { 950 | margin-top: -16px; 951 | Margin-top: -16px; } 952 | 953 | span.preheader { 954 | display: none !important; 955 | visibility: hidden; 956 | mso-hide: all !important; 957 | font-size: 1px; 958 | color: #f3f3f3; 959 | line-height: 1px; 960 | max-height: 0px; 961 | max-width: 0px; 962 | opacity: 0; 963 | overflow: hidden; } 964 | 965 | table.button { 966 | width: auto; 967 | margin: 0 0 16px 0; 968 | Margin: 0 0 16px 0; } 969 | table.button table td { 970 | text-align: left; 971 | color: #fefefe; 972 | background: #2199e8; 973 | border: 2px solid #2199e8; } 974 | table.button table td a { 975 | font-family: Helvetica, Arial, sans-serif; 976 | font-size: 16px; 977 | font-weight: bold; 978 | color: #fefefe; 979 | text-decoration: none; 980 | display: inline-block; 981 | padding: 8px 16px 8px 16px; 982 | border: 0 solid #2199e8; 983 | border-radius: 3px; } 984 | table.button.radius table td { 985 | border-radius: 3px; 986 | border: none; } 987 | table.button.rounded table td { 988 | border-radius: 500px; 989 | border: none; } 990 | 991 | table.button:hover table tr td a, 992 | table.button:active table tr td a, 993 | table.button table tr td a:visited, 994 | table.button.tiny:hover table tr td a, 995 | table.button.tiny:active table tr td a, 996 | table.button.tiny table tr td a:visited, 997 | table.button.small:hover table tr td a, 998 | table.button.small:active table tr td a, 999 | table.button.small table tr td a:visited, 1000 | table.button.large:hover table tr td a, 1001 | table.button.large:active table tr td a, 1002 | table.button.large table tr td a:visited { 1003 | color: #fefefe; } 1004 | 1005 | table.button.tiny table td, 1006 | table.button.tiny table a { 1007 | padding: 4px 8px 4px 8px; } 1008 | 1009 | table.button.tiny table a { 1010 | font-size: 10px; 1011 | font-weight: normal; } 1012 | 1013 | table.button.small table td, 1014 | table.button.small table a { 1015 | padding: 5px 10px 5px 10px; 1016 | font-size: 12px; } 1017 | 1018 | table.button.large table a { 1019 | padding: 10px 20px 10px 20px; 1020 | font-size: 20px; } 1021 | 1022 | table.button.expand, 1023 | table.button.expanded { 1024 | width: 100% !important; } 1025 | table.button.expand table, 1026 | table.button.expanded table { 1027 | width: 100%; } 1028 | table.button.expand table a, 1029 | table.button.expanded table a { 1030 | text-align: center; 1031 | width: 100%; 1032 | padding-left: 0; 1033 | padding-right: 0; } 1034 | table.button.expand center, 1035 | table.button.expanded center { 1036 | min-width: 0; } 1037 | 1038 | table.button:hover table td, 1039 | table.button:visited table td, 1040 | table.button:active table td { 1041 | background: #147dc2; 1042 | color: #fefefe; } 1043 | 1044 | table.button:hover table a, 1045 | table.button:visited table a, 1046 | table.button:active table a { 1047 | border: 0 solid #147dc2; } 1048 | 1049 | table.button.secondary table td { 1050 | background: #777777; 1051 | color: #fefefe; 1052 | border: 0px solid #777777; } 1053 | 1054 | table.button.secondary table a { 1055 | color: #fefefe; 1056 | border: 0 solid #777777; } 1057 | 1058 | table.button.secondary:hover table td { 1059 | background: #919191; 1060 | color: #fefefe; } 1061 | 1062 | table.button.secondary:hover table a { 1063 | border: 0 solid #919191; } 1064 | 1065 | table.button.secondary:hover table td a { 1066 | color: #fefefe; } 1067 | 1068 | table.button.secondary:active table td a { 1069 | color: #fefefe; } 1070 | 1071 | table.button.secondary table td a:visited { 1072 | color: #fefefe; } 1073 | 1074 | table.button.success table td { 1075 | background: #3adb76; 1076 | border: 0px solid #3adb76; } 1077 | 1078 | table.button.success table a { 1079 | border: 0 solid #3adb76; } 1080 | 1081 | table.button.success:hover table td { 1082 | background: #23bf5d; } 1083 | 1084 | table.button.success:hover table a { 1085 | border: 0 solid #23bf5d; } 1086 | 1087 | table.button.alert table td { 1088 | background: #ec5840; 1089 | border: 0px solid #ec5840; } 1090 | 1091 | table.button.alert table a { 1092 | border: 0 solid #ec5840; } 1093 | 1094 | table.button.alert:hover table td { 1095 | background: #e23317; } 1096 | 1097 | table.button.alert:hover table a { 1098 | border: 0 solid #e23317; } 1099 | 1100 | table.button.warning table td { 1101 | background: #ffae00; 1102 | border: 0px solid #ffae00; } 1103 | 1104 | table.button.warning table a { 1105 | border: 0px solid #ffae00; } 1106 | 1107 | table.button.warning:hover table td { 1108 | background: #cc8b00; } 1109 | 1110 | table.button.warning:hover table a { 1111 | border: 0px solid #cc8b00; } 1112 | 1113 | table.callout { 1114 | margin-bottom: 16px; 1115 | Margin-bottom: 16px; } 1116 | 1117 | th.callout-inner { 1118 | width: 100%; 1119 | border: 1px solid #cbcbcb; 1120 | padding: 10px; 1121 | background: #fefefe; } 1122 | th.callout-inner.primary { 1123 | background: #def0fc; 1124 | border: 1px solid #444444; 1125 | color: #0a0a0a; } 1126 | th.callout-inner.secondary { 1127 | background: #ebebeb; 1128 | border: 1px solid #444444; 1129 | color: #0a0a0a; } 1130 | th.callout-inner.success { 1131 | background: #e1faea; 1132 | border: 1px solid #1b9448; 1133 | color: #fefefe; } 1134 | th.callout-inner.warning { 1135 | background: #fff3d9; 1136 | border: 1px solid #996800; 1137 | color: #fefefe; } 1138 | th.callout-inner.alert { 1139 | background: #fce6e2; 1140 | border: 1px solid #b42912; 1141 | color: #fefefe; } 1142 | 1143 | .thumbnail { 1144 | border: solid 4px #fefefe; 1145 | box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2); 1146 | display: inline-block; 1147 | line-height: 0; 1148 | max-width: 100%; 1149 | transition: box-shadow 200ms ease-out; 1150 | border-radius: 3px; 1151 | margin-bottom: 16px; } 1152 | .thumbnail:hover, .thumbnail:focus { 1153 | box-shadow: 0 0 6px 1px rgba(33, 153, 232, 0.5); } 1154 | 1155 | table.menu { 1156 | width: 580px; } 1157 | table.menu td.menu-item, 1158 | table.menu th.menu-item { 1159 | padding: 10px; 1160 | padding-right: 10px; } 1161 | table.menu td.menu-item a, 1162 | table.menu th.menu-item a { 1163 | color: #2199e8; } 1164 | 1165 | table.menu.vertical td.menu-item, 1166 | table.menu.vertical th.menu-item { 1167 | padding: 10px; 1168 | padding-right: 0; 1169 | display: block; } 1170 | table.menu.vertical td.menu-item a, 1171 | table.menu.vertical th.menu-item a { 1172 | width: 100%; } 1173 | 1174 | table.menu.vertical td.menu-item table.menu.vertical td.menu-item, 1175 | table.menu.vertical td.menu-item table.menu.vertical th.menu-item, 1176 | table.menu.vertical th.menu-item table.menu.vertical td.menu-item, 1177 | table.menu.vertical th.menu-item table.menu.vertical th.menu-item { 1178 | padding-left: 10px; } 1179 | 1180 | table.menu.text-center a { 1181 | text-align: center; } 1182 | 1183 | .menu[align="center"] { 1184 | width: auto !important; } 1185 | 1186 | body.outlook p { 1187 | display: inline !important; } 1188 | 1189 | @media only screen and (max-width: 596px) { 1190 | table.body img { 1191 | width: auto; 1192 | height: auto; } 1193 | table.body center { 1194 | min-width: 0 !important; } 1195 | table.body .container { 1196 | width: 95% !important; } 1197 | table.body .columns, 1198 | table.body .column { 1199 | height: auto !important; 1200 | -moz-box-sizing: border-box; 1201 | -webkit-box-sizing: border-box; 1202 | box-sizing: border-box; 1203 | padding-left: 16px !important; 1204 | padding-right: 16px !important; } 1205 | table.body .columns .column, 1206 | table.body .columns .columns, 1207 | table.body .column .column, 1208 | table.body .column .columns { 1209 | padding-left: 0 !important; 1210 | padding-right: 0 !important; } 1211 | table.body .collapse .columns, 1212 | table.body .collapse .column { 1213 | padding-left: 0 !important; 1214 | padding-right: 0 !important; } 1215 | td.small-1, 1216 | th.small-1 { 1217 | display: inline-block !important; 1218 | width: 8.33333% !important; } 1219 | td.small-2, 1220 | th.small-2 { 1221 | display: inline-block !important; 1222 | width: 16.66667% !important; } 1223 | td.small-3, 1224 | th.small-3 { 1225 | display: inline-block !important; 1226 | width: 25% !important; } 1227 | td.small-4, 1228 | th.small-4 { 1229 | display: inline-block !important; 1230 | width: 33.33333% !important; } 1231 | td.small-5, 1232 | th.small-5 { 1233 | display: inline-block !important; 1234 | width: 41.66667% !important; } 1235 | td.small-6, 1236 | th.small-6 { 1237 | display: inline-block !important; 1238 | width: 50% !important; } 1239 | td.small-7, 1240 | th.small-7 { 1241 | display: inline-block !important; 1242 | width: 58.33333% !important; } 1243 | td.small-8, 1244 | th.small-8 { 1245 | display: inline-block !important; 1246 | width: 66.66667% !important; } 1247 | td.small-9, 1248 | th.small-9 { 1249 | display: inline-block !important; 1250 | width: 75% !important; } 1251 | td.small-10, 1252 | th.small-10 { 1253 | display: inline-block !important; 1254 | width: 83.33333% !important; } 1255 | td.small-11, 1256 | th.small-11 { 1257 | display: inline-block !important; 1258 | width: 91.66667% !important; } 1259 | td.small-12, 1260 | th.small-12 { 1261 | display: inline-block !important; 1262 | width: 100% !important; } 1263 | .columns td.small-12, 1264 | .column td.small-12, 1265 | .columns th.small-12, 1266 | .column th.small-12 { 1267 | display: block !important; 1268 | width: 100% !important; } 1269 | table.body td.small-offset-1, 1270 | table.body th.small-offset-1 { 1271 | margin-left: 8.33333% !important; 1272 | Margin-left: 8.33333% !important; } 1273 | table.body td.small-offset-2, 1274 | table.body th.small-offset-2 { 1275 | margin-left: 16.66667% !important; 1276 | Margin-left: 16.66667% !important; } 1277 | table.body td.small-offset-3, 1278 | table.body th.small-offset-3 { 1279 | margin-left: 25% !important; 1280 | Margin-left: 25% !important; } 1281 | table.body td.small-offset-4, 1282 | table.body th.small-offset-4 { 1283 | margin-left: 33.33333% !important; 1284 | Margin-left: 33.33333% !important; } 1285 | table.body td.small-offset-5, 1286 | table.body th.small-offset-5 { 1287 | margin-left: 41.66667% !important; 1288 | Margin-left: 41.66667% !important; } 1289 | table.body td.small-offset-6, 1290 | table.body th.small-offset-6 { 1291 | margin-left: 50% !important; 1292 | Margin-left: 50% !important; } 1293 | table.body td.small-offset-7, 1294 | table.body th.small-offset-7 { 1295 | margin-left: 58.33333% !important; 1296 | Margin-left: 58.33333% !important; } 1297 | table.body td.small-offset-8, 1298 | table.body th.small-offset-8 { 1299 | margin-left: 66.66667% !important; 1300 | Margin-left: 66.66667% !important; } 1301 | table.body td.small-offset-9, 1302 | table.body th.small-offset-9 { 1303 | margin-left: 75% !important; 1304 | Margin-left: 75% !important; } 1305 | table.body td.small-offset-10, 1306 | table.body th.small-offset-10 { 1307 | margin-left: 83.33333% !important; 1308 | Margin-left: 83.33333% !important; } 1309 | table.body td.small-offset-11, 1310 | table.body th.small-offset-11 { 1311 | margin-left: 91.66667% !important; 1312 | Margin-left: 91.66667% !important; } 1313 | table.body table.columns td.expander, 1314 | table.body table.columns th.expander { 1315 | display: none !important; } 1316 | table.body .right-text-pad, 1317 | table.body .text-pad-right { 1318 | padding-left: 10px !important; } 1319 | table.body .left-text-pad, 1320 | table.body .text-pad-left { 1321 | padding-right: 10px !important; } 1322 | table.menu { 1323 | width: 100% !important; } 1324 | table.menu td, 1325 | table.menu th { 1326 | width: auto !important; 1327 | display: inline-block !important; } 1328 | table.menu.vertical td, 1329 | table.menu.vertical th, table.menu.small-vertical td, 1330 | table.menu.small-vertical th { 1331 | display: block !important; } 1332 | table.menu[align="center"] { 1333 | width: auto !important; } 1334 | table.button.small-expand, 1335 | table.button.small-expanded { 1336 | width: 100% !important; } 1337 | table.button.small-expand table, 1338 | table.button.small-expanded table { 1339 | width: 100%; } 1340 | table.button.small-expand table a, 1341 | table.button.small-expanded table a { 1342 | text-align: center !important; 1343 | width: 100% !important; 1344 | padding-left: 0 !important; 1345 | padding-right: 0 !important; } 1346 | table.button.small-expand center, 1347 | table.button.small-expanded center { 1348 | min-width: 0; } } 1349 | -------------------------------------------------------------------------------- /public/css/foundation-for-emails/foundation.min.css: -------------------------------------------------------------------------------- 1 | a,img{text-decoration:none}.wrapper{width:100%}#outlook a{padding:0}body{width:100%!important;min-width:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.ExternalClass{width:100%}.ExternalClass,.ExternalClass div,.ExternalClass font,.ExternalClass p,.ExternalClass span,.ExternalClass td{line-height:100%}#backgroundTable{margin:0;Margin:0;padding:0;width:100%!important;line-height:100%!important}img{outline:0;-ms-interpolation-mode:bicubic;width:auto;max-width:100%;clear:both;display:block}center{width:100%;min-width:580px}a img{border:none}table{border-spacing:0;border-collapse:collapse}td{word-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto;border-collapse:collapse!important}table,td,tr{padding:0;vertical-align:top;text-align:left}@media only screen{html{min-height:100%;background:#f3f3f3}}table.body{background:#f3f3f3;height:100%;width:100%}table.container{background:#fefefe;width:580px;margin:0 auto;Margin:0 auto;text-align:inherit}table.row,table.spacer,td.column table:not(.button),td.columns table:not(.button),th.column table:not(.button),th.columns table:not(.button){width:100%}table.row{padding:0;position:relative}table.spacer td{mso-line-height-rule:exactly}table.container table.row{display:table}td.column,td.columns,th.column,th.columns{margin:0 auto;Margin:0 auto;padding-left:16px;padding-bottom:16px}td.column .column,td.column .columns,td.columns .column,td.columns .columns,th.column .column,th.column .columns,th.columns .column,th.columns .columns{padding-left:0!important;padding-right:0!important}td.column .column center,td.column .columns center,td.columns .column center,td.columns .columns center,th.column .column center,th.column .columns center,th.columns .column center,th.columns .columns center{min-width:none!important}td.column.last,td.columns.last,th.column.last,th.columns.last{padding-right:16px}td.large-1,th.large-1{width:32.33px;padding-left:8px;padding-right:8px}td.large-1.first,th.large-1.first{padding-left:16px}td.large-1.last,th.large-1.last{padding-right:16px}.collapse>tbody>tr>td.large-1,.collapse>tbody>tr>th.large-1{padding-right:0;padding-left:0;width:48.33px}.collapse td.large-1.first,.collapse td.large-1.last,.collapse th.large-1.first,.collapse th.large-1.last{width:56.33px}td.large-1 center,th.large-1 center{min-width:.33px}.body .column td.large-1,.body .column th.large-1,.body .columns td.large-1,.body .columns th.large-1{width:8.33333%}td.large-2,th.large-2{width:80.67px;padding-left:8px;padding-right:8px}td.large-2.first,th.large-2.first{padding-left:16px}td.large-2.last,th.large-2.last{padding-right:16px}.collapse>tbody>tr>td.large-2,.collapse>tbody>tr>th.large-2{padding-right:0;padding-left:0;width:96.67px}.collapse td.large-2.first,.collapse td.large-2.last,.collapse th.large-2.first,.collapse th.large-2.last{width:104.67px}td.large-2 center,th.large-2 center{min-width:48.67px}.body .column td.large-2,.body .column th.large-2,.body .columns td.large-2,.body .columns th.large-2{width:16.66667%}td.large-3,th.large-3{width:129px;padding-left:8px;padding-right:8px}td.large-3.first,th.large-3.first{padding-left:16px}td.large-3.last,th.large-3.last{padding-right:16px}.collapse>tbody>tr>td.large-3,.collapse>tbody>tr>th.large-3{padding-right:0;padding-left:0;width:145px}.collapse td.large-3.first,.collapse td.large-3.last,.collapse th.large-3.first,.collapse th.large-3.last{width:153px}td.large-3 center,th.large-3 center{min-width:97px}.body .column td.large-3,.body .column th.large-3,.body .columns td.large-3,.body .columns th.large-3{width:25%}td.large-4,th.large-4{width:177.33px;padding-left:8px;padding-right:8px}td.large-4.first,th.large-4.first{padding-left:16px}td.large-4.last,th.large-4.last{padding-right:16px}.collapse>tbody>tr>td.large-4,.collapse>tbody>tr>th.large-4{padding-right:0;padding-left:0;width:193.33px}.collapse td.large-4.first,.collapse td.large-4.last,.collapse th.large-4.first,.collapse th.large-4.last{width:201.33px}td.large-4 center,th.large-4 center{min-width:145.33px}.body .column td.large-4,.body .column th.large-4,.body .columns td.large-4,.body .columns th.large-4{width:33.33333%}td.large-5,th.large-5{width:225.67px;padding-left:8px;padding-right:8px}td.large-5.first,th.large-5.first{padding-left:16px}td.large-5.last,th.large-5.last{padding-right:16px}.collapse>tbody>tr>td.large-5,.collapse>tbody>tr>th.large-5{padding-right:0;padding-left:0;width:241.67px}.collapse td.large-5.first,.collapse td.large-5.last,.collapse th.large-5.first,.collapse th.large-5.last{width:249.67px}td.large-5 center,th.large-5 center{min-width:193.67px}.body .column td.large-5,.body .column th.large-5,.body .columns td.large-5,.body .columns th.large-5{width:41.66667%}td.large-6,th.large-6{width:274px;padding-left:8px;padding-right:8px}td.large-6.first,th.large-6.first{padding-left:16px}td.large-6.last,th.large-6.last{padding-right:16px}.collapse>tbody>tr>td.large-6,.collapse>tbody>tr>th.large-6{padding-right:0;padding-left:0;width:290px}.collapse td.large-6.first,.collapse td.large-6.last,.collapse th.large-6.first,.collapse th.large-6.last{width:298px}td.large-6 center,th.large-6 center{min-width:242px}.body .column td.large-6,.body .column th.large-6,.body .columns td.large-6,.body .columns th.large-6{width:50%}td.large-7,th.large-7{width:322.33px;padding-left:8px;padding-right:8px}td.large-7.first,th.large-7.first{padding-left:16px}td.large-7.last,th.large-7.last{padding-right:16px}.collapse>tbody>tr>td.large-7,.collapse>tbody>tr>th.large-7{padding-right:0;padding-left:0;width:338.33px}.collapse td.large-7.first,.collapse td.large-7.last,.collapse th.large-7.first,.collapse th.large-7.last{width:346.33px}td.large-7 center,th.large-7 center{min-width:290.33px}.body .column td.large-7,.body .column th.large-7,.body .columns td.large-7,.body .columns th.large-7{width:58.33333%}td.large-8,th.large-8{width:370.67px;padding-left:8px;padding-right:8px}td.large-8.first,th.large-8.first{padding-left:16px}td.large-8.last,th.large-8.last{padding-right:16px}.collapse>tbody>tr>td.large-8,.collapse>tbody>tr>th.large-8{padding-right:0;padding-left:0;width:386.67px}.collapse td.large-8.first,.collapse td.large-8.last,.collapse th.large-8.first,.collapse th.large-8.last{width:394.67px}td.large-8 center,th.large-8 center{min-width:338.67px}.body .column td.large-8,.body .column th.large-8,.body .columns td.large-8,.body .columns th.large-8{width:66.66667%}td.large-9,th.large-9{width:419px;padding-left:8px;padding-right:8px}td.large-9.first,th.large-9.first{padding-left:16px}td.large-9.last,th.large-9.last{padding-right:16px}.collapse>tbody>tr>td.large-9,.collapse>tbody>tr>th.large-9{padding-right:0;padding-left:0;width:435px}.collapse td.large-9.first,.collapse td.large-9.last,.collapse th.large-9.first,.collapse th.large-9.last{width:443px}td.large-9 center,th.large-9 center{min-width:387px}.body .column td.large-9,.body .column th.large-9,.body .columns td.large-9,.body .columns th.large-9{width:75%}td.large-10,th.large-10{width:467.33px;padding-left:8px;padding-right:8px}td.large-10.first,th.large-10.first{padding-left:16px}td.large-10.last,th.large-10.last{padding-right:16px}.collapse>tbody>tr>td.large-10,.collapse>tbody>tr>th.large-10{padding-right:0;padding-left:0;width:483.33px}.collapse td.large-10.first,.collapse td.large-10.last,.collapse th.large-10.first,.collapse th.large-10.last{width:491.33px}td.large-10 center,th.large-10 center{min-width:435.33px}.body .column td.large-10,.body .column th.large-10,.body .columns td.large-10,.body .columns th.large-10{width:83.33333%}td.large-11,th.large-11{width:515.67px;padding-left:8px;padding-right:8px}td.large-11.first,th.large-11.first{padding-left:16px}td.large-11.last,th.large-11.last{padding-right:16px}.collapse>tbody>tr>td.large-11,.collapse>tbody>tr>th.large-11{padding-right:0;padding-left:0;width:531.67px}.collapse td.large-11.first,.collapse td.large-11.last,.collapse th.large-11.first,.collapse th.large-11.last{width:539.67px}td.large-11 center,th.large-11 center{min-width:483.67px}.body .column td.large-11,.body .column th.large-11,.body .columns td.large-11,.body .columns th.large-11{width:91.66667%}td.large-12,th.large-12{width:564px;padding-left:8px;padding-right:8px}td.large-12.first,th.large-12.first{padding-left:16px}td.large-12.last,th.large-12.last{padding-right:16px}.collapse>tbody>tr>td.large-12,.collapse>tbody>tr>th.large-12{padding-right:0;padding-left:0;width:580px}.collapse td.large-12.first,.collapse td.large-12.last,.collapse th.large-12.first,.collapse th.large-12.last{width:588px}td.large-12 center,th.large-12 center{min-width:532px}.body .column td.large-12,.body .column th.large-12,.body .columns td.large-12,.body .columns th.large-12{width:100%}td.large-offset-1,td.large-offset-1.first,td.large-offset-1.last,th.large-offset-1,th.large-offset-1.first,th.large-offset-1.last{padding-left:64.33px}td.large-offset-2,td.large-offset-2.first,td.large-offset-2.last,th.large-offset-2,th.large-offset-2.first,th.large-offset-2.last{padding-left:112.67px}td.large-offset-3,td.large-offset-3.first,td.large-offset-3.last,th.large-offset-3,th.large-offset-3.first,th.large-offset-3.last{padding-left:161px}td.large-offset-4,td.large-offset-4.first,td.large-offset-4.last,th.large-offset-4,th.large-offset-4.first,th.large-offset-4.last{padding-left:209.33px}td.large-offset-5,td.large-offset-5.first,td.large-offset-5.last,th.large-offset-5,th.large-offset-5.first,th.large-offset-5.last{padding-left:257.67px}td.large-offset-6,td.large-offset-6.first,td.large-offset-6.last,th.large-offset-6,th.large-offset-6.first,th.large-offset-6.last{padding-left:306px}td.large-offset-7,td.large-offset-7.first,td.large-offset-7.last,th.large-offset-7,th.large-offset-7.first,th.large-offset-7.last{padding-left:354.33px}td.large-offset-8,td.large-offset-8.first,td.large-offset-8.last,th.large-offset-8,th.large-offset-8.first,th.large-offset-8.last{padding-left:402.67px}td.large-offset-9,td.large-offset-9.first,td.large-offset-9.last,th.large-offset-9,th.large-offset-9.first,th.large-offset-9.last{padding-left:451px}td.large-offset-10,td.large-offset-10.first,td.large-offset-10.last,th.large-offset-10,th.large-offset-10.first,th.large-offset-10.last{padding-left:499.33px}td.large-offset-11,td.large-offset-11.first,td.large-offset-11.last,th.large-offset-11,th.large-offset-11.first,th.large-offset-11.last{padding-left:547.67px}td.expander,th.expander{visibility:hidden;width:0;padding:0!important}table.container.radius{border-radius:0;border-collapse:separate}.block-grid{width:100%;max-width:580px}.block-grid td{display:inline-block;padding:8px}.up-2 td{width:274px!important}.up-3 td{width:177px!important}.up-4 td{width:129px!important}.up-5 td{width:100px!important}.up-6 td{width:80px!important}.up-7 td{width:66px!important}.up-8 td{width:56px!important}h1.text-center,h2.text-center,h3.text-center,h4.text-center,h5.text-center,h6.text-center,p.text-center,span.text-center,table.text-center,td.text-center,th.text-center{text-align:center}h1.text-left,h2.text-left,h3.text-left,h4.text-left,h5.text-left,h6.text-left,p.text-left,span.text-left,table.text-left,td.text-left,th.text-left{text-align:left}h1.text-right,h2.text-right,h3.text-right,h4.text-right,h5.text-right,h6.text-right,p.text-right,span.text-right,table.text-right,td.text-right,th.text-right{text-align:right}span.text-center{display:block;width:100%;text-align:center}@media only screen and (max-width:596px){.small-float-center,.small-text-center{text-align:center!important}.small-float-center{margin:0 auto!important;float:none!important}.small-text-left{text-align:left!important}.small-text-right{text-align:right!important}}img.float-left{float:left;text-align:left}img.float-right{float:right;text-align:right}img.float-center,img.text-center,table.float-center,td.float-center,th.float-center{margin:0 auto;Margin:0 auto;float:none;text-align:center}.hide-for-large{display:none!important;mso-hide:all;overflow:hidden;max-height:0;font-size:0;width:0;line-height:0}table.body table.container .hide-for-large *{mso-hide:all}@media only screen and (max-width:596px){.hide-for-large{display:block!important;width:auto!important;overflow:visible!important;max-height:none!important;font-size:inherit!important;line-height:inherit!important}table.body table.container .hide-for-large,table.body table.container .row.hide-for-large{display:table!important;width:100%!important}table.body table.container .callout-inner.hide-for-large{display:table-cell!important;width:100%!important}table.body table.container .show-for-large{display:none!important;width:0;mso-hide:all;overflow:hidden}}a,body,h1,h2,h3,h4,h5,h6,p,table.body,td,th{color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:400;padding:0;margin:0;Margin:0;text-align:left;line-height:1.3}h1,h2,h3,h4,h5,h6,p{margin-bottom:10px;Margin-bottom:10px}h1,h2,h3,h4,h5,h6{color:inherit;word-wrap:normal;font-family:Helvetica,Arial,sans-serif;font-weight:400}h1{font-size:34px}h2{font-size:30px}h3{font-size:28px}h4{font-size:24px}h5{font-size:20px}h6{font-size:18px}body,p,table.body,td,th{font-size:16px;line-height:1.3}p.lead{font-size:20px;line-height:1.6}p.subheader{margin-top:4px;margin-bottom:8px;Margin-top:4px;Margin-bottom:8px;font-weight:400;line-height:1.4;color:#8a8a8a}a,a:visited,h1 a,h1 a:visited,h2 a,h2 a:visited,h3 a,h3 a:visited,h4 a,h4 a:visited,h5 a,h5 a:visited,h6 a,h6 a:visited{color:#2199e8}pre code,small{color:#cacaca}small{font-size:80%}a:active,a:hover{color:#147dc2}pre{background:#f3f3f3;margin:30px 0;Margin:30px 0}pre code span.callout{color:#8a8a8a;font-weight:700}pre code span.callout-strong{color:#ff6908;font-weight:700}table.hr{width:100%}table.hr th{height:0;max-width:580px;border-top:0;border-right:0;border-bottom:1px solid #0a0a0a;border-left:0;margin:20px auto;Margin:20px auto;clear:both}.stat{font-size:40px;line-height:1}p+.stat{margin-top:-16px;Margin-top:-16px}span.preheader{display:none!important;visibility:hidden;mso-hide:all!important;font-size:1px;color:#f3f3f3;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden}table.button{width:auto;margin:0 0 16px;Margin:0 0 16px 0}table.button table td{text-align:left;color:#fefefe;background:#2199e8;border:2px solid #2199e8}table.button table td a{font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:700;color:#fefefe;text-decoration:none;display:inline-block;padding:8px 16px;border:0 solid #2199e8;border-radius:3px}table.button.radius table td{border-radius:3px;border:none}table.button.rounded table td{border-radius:500px;border:none}table.button table tr td a:visited,table.button.large table tr td a:visited,table.button.large:active table tr td a,table.button.large:hover table tr td a,table.button.small table tr td a:visited,table.button.small:active table tr td a,table.button.small:hover table tr td a,table.button.tiny table tr td a:visited,table.button.tiny:active table tr td a,table.button.tiny:hover table tr td a,table.button:active table tr td a,table.button:hover table tr td a{color:#fefefe}table.button.tiny table a,table.button.tiny table td{padding:4px 8px}table.button.tiny table a{font-size:10px;font-weight:400}table.button.small table a,table.button.small table td{padding:5px 10px;font-size:12px}table.button.large table a{padding:10px 20px;font-size:20px}table.button.expand,table.button.expanded{width:100%!important}table.button.expand table,table.button.expanded table{width:100%}table.button.expand table a,table.button.expanded table a{text-align:center;width:100%;padding-left:0;padding-right:0}table.button.expand center,table.button.expanded center{min-width:0}table.button:active table td,table.button:hover table td,table.button:visited table td{background:#147dc2;color:#fefefe}table.button:active table a,table.button:hover table a,table.button:visited table a{border:0 solid #147dc2}table.button.secondary table a,table.button.secondary table td{border:0 solid #777;color:#fefefe}table.button.secondary table td{background:#777}table.button.secondary:hover table td{background:#919191;color:#fefefe}table.button.secondary:hover table a{border:0 solid #919191}table.button.secondary table td a:visited,table.button.secondary:active table td a,table.button.secondary:hover table td a{color:#fefefe}table.button.success table td{background:#3adb76;border:0 solid #3adb76}table.button.success table a{border:0 solid #3adb76}table.button.success:hover table td{background:#23bf5d}table.button.success:hover table a{border:0 solid #23bf5d}table.button.alert table td{background:#ec5840;border:0 solid #ec5840}table.button.alert table a{border:0 solid #ec5840}table.button.alert:hover table td{background:#e23317}table.button.alert:hover table a{border:0 solid #e23317}table.button.warning table td{background:#ffae00;border:0 solid #ffae00}table.button.warning table a{border:0 solid #ffae00}table.button.warning:hover table td{background:#cc8b00}table.button.warning:hover table a{border:0 solid #cc8b00}table.callout{margin-bottom:16px;Margin-bottom:16px}th.callout-inner{width:100%;border:1px solid #cbcbcb;padding:10px;background:#fefefe}th.callout-inner.primary{background:#def0fc;border:1px solid #444;color:#0a0a0a}th.callout-inner.secondary{background:#ebebeb;border:1px solid #444;color:#0a0a0a}th.callout-inner.success{background:#e1faea;border:1px solid #1b9448;color:#fefefe}th.callout-inner.warning{background:#fff3d9;border:1px solid #996800;color:#fefefe}th.callout-inner.alert{background:#fce6e2;border:1px solid #b42912;color:#fefefe}.thumbnail{border:4px solid #fefefe;box-shadow:0 0 0 1px rgba(10,10,10,.2);display:inline-block;line-height:0;max-width:100%;transition:box-shadow .2s ease-out;border-radius:3px;margin-bottom:16px}.thumbnail:focus,.thumbnail:hover{box-shadow:0 0 6px 1px rgba(33,153,232,.5)}table.menu{width:580px}table.menu td.menu-item,table.menu th.menu-item{padding:10px}table.menu td.menu-item a,table.menu th.menu-item a{color:#2199e8}table.menu.vertical td.menu-item,table.menu.vertical th.menu-item{padding:10px 0 10px 10px;display:block}table.menu.vertical td.menu-item a,table.menu.vertical th.menu-item a{width:100%}table.menu.vertical td.menu-item table.menu.vertical td.menu-item,table.menu.vertical td.menu-item table.menu.vertical th.menu-item,table.menu.vertical th.menu-item table.menu.vertical td.menu-item,table.menu.vertical th.menu-item table.menu.vertical th.menu-item{padding-left:10px}table.menu.text-center a{text-align:center}.menu[align=center]{width:auto!important}body.outlook p{display:inline!important}@media only screen and (max-width:596px){td.small-1,td.small-10,td.small-11,td.small-12,td.small-2,td.small-3,td.small-4,td.small-5,td.small-7,td.small-8,td.small-9,th.small-1,th.small-10,th.small-11,th.small-12,th.small-2,th.small-3,th.small-4,th.small-5,th.small-7,th.small-8,th.small-9{display:inline-block!important}table.body img{width:auto;height:auto}table.body center{min-width:0!important}table.body .container{width:95%!important}table.body .column,table.body .columns{height:auto!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px!important;padding-right:16px!important}table.body .collapse .column,table.body .collapse .columns,table.body .column .column,table.body .column .columns,table.body .columns .column,table.body .columns .columns{padding-left:0!important;padding-right:0!important}td.small-1,th.small-1{width:8.33333%!important}td.small-2,th.small-2{width:16.66667%!important}td.small-3,th.small-3{width:25%!important}td.small-4,th.small-4{width:33.33333%!important}td.small-5,th.small-5{width:41.66667%!important}td.small-6,th.small-6{display:inline-block!important;width:50%!important}td.small-7,th.small-7{width:58.33333%!important}td.small-8,th.small-8{width:66.66667%!important}td.small-9,th.small-9{width:75%!important}td.small-10,th.small-10{width:83.33333%!important}td.small-11,th.small-11{width:91.66667%!important}td.small-12,th.small-12{width:100%!important}.column td.small-12,.column th.small-12,.columns td.small-12,.columns th.small-12{display:block!important;width:100%!important}table.body td.small-offset-1,table.body th.small-offset-1{margin-left:8.33333%!important;Margin-left:8.33333%!important}table.body td.small-offset-2,table.body th.small-offset-2{margin-left:16.66667%!important;Margin-left:16.66667%!important}table.body td.small-offset-3,table.body th.small-offset-3{margin-left:25%!important;Margin-left:25%!important}table.body td.small-offset-4,table.body th.small-offset-4{margin-left:33.33333%!important;Margin-left:33.33333%!important}table.body td.small-offset-5,table.body th.small-offset-5{margin-left:41.66667%!important;Margin-left:41.66667%!important}table.body td.small-offset-6,table.body th.small-offset-6{margin-left:50%!important;Margin-left:50%!important}table.body td.small-offset-7,table.body th.small-offset-7{margin-left:58.33333%!important;Margin-left:58.33333%!important}table.body td.small-offset-8,table.body th.small-offset-8{margin-left:66.66667%!important;Margin-left:66.66667%!important}table.body td.small-offset-9,table.body th.small-offset-9{margin-left:75%!important;Margin-left:75%!important}table.body td.small-offset-10,table.body th.small-offset-10{margin-left:83.33333%!important;Margin-left:83.33333%!important}table.body td.small-offset-11,table.body th.small-offset-11{margin-left:91.66667%!important;Margin-left:91.66667%!important}table.body table.columns td.expander,table.body table.columns th.expander{display:none!important}table.body .right-text-pad,table.body .text-pad-right{padding-left:10px!important}table.body .left-text-pad,table.body .text-pad-left{padding-right:10px!important}table.menu{width:100%!important}table.menu td,table.menu th{width:auto!important;display:inline-block!important}table.menu.small-vertical td,table.menu.small-vertical th,table.menu.vertical td,table.menu.vertical th{display:block!important}table.menu[align=center]{width:auto!important}table.button.small-expand,table.button.small-expanded{width:100%!important}table.button.small-expand table,table.button.small-expanded table{width:100%}table.button.small-expand table a,table.button.small-expanded table a{text-align:center!important;width:100%!important;padding-left:0!important;padding-right:0!important}table.button.small-expand center,table.button.small-expanded center{min-width:0}} -------------------------------------------------------------------------------- /src/Collector/CssCollector.php: -------------------------------------------------------------------------------- 1 | cssFiles[] = $file; 23 | } 24 | 25 | public function removeAll(): void 26 | { 27 | $this->cssFiles = []; 28 | } 29 | 30 | public function getIterator(): \ArrayIterator 31 | { 32 | return new \ArrayIterator($this->cssFiles); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/DependencyInjection/EmailizrExtension.php: -------------------------------------------------------------------------------- 1 | load('services.yaml'); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/EmailizrBundle.php: -------------------------------------------------------------------------------- 1 | editmodeResolver->isEditmode() === false) { 28 | return Pinky\transformString($templateHtml)->saveHTML(); 29 | } 30 | 31 | $templateHtml = preg_replace_callback('/()([\s\S]*?)(<\/script>)/', function ($hit) { 32 | return $hit[1] . base64_encode($hit[2]) . $hit[3]; 33 | }, $templateHtml); 34 | 35 | $inkedHtml = Pinky\transformString($templateHtml)->saveHTML(); 36 | 37 | return preg_replace_callback('/()([\s\S]*?)(<\/script>)/', function ($hit) { 38 | return $hit[1] . base64_decode($hit[2]) . $hit[3]; 39 | }, $inkedHtml); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/Parser/InlineStyleParser.php: -------------------------------------------------------------------------------- 1 | editmodeResolver->isEditmode()) { 32 | return $html; 33 | } 34 | 35 | $inliner = CssInliner::fromHtml($html)->inlineCss($css); 36 | 37 | if ($onlyBodyContent) { 38 | $mergedHtml = $inliner->renderBodyContent(); 39 | } else { 40 | $mergedHtml = $inliner->render(); 41 | } 42 | 43 | //replace "{{ }}" placeholder in quotes 44 | $mergedHtml = preg_replace_callback('/"(%7B%7B%20)(.*)(%20%7D%7D)"/', static function ($hit) { 45 | return '"{{' . $hit[2] . '}}"'; 46 | }, $mergedHtml); 47 | 48 | /* remove tabs, spaces, newlines, etc. */ 49 | return str_replace(["\r\n", "\r", "\n", "\t", ' ', ' ', ' '], '', $mergedHtml); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/Service/ContentService.php: -------------------------------------------------------------------------------- 1 | /', $html, $m) === 0) { 37 | return $html; 38 | } 39 | 40 | if ($parseInky === true) { 41 | $html = $this->inkyParser->parseInkyHtml($html); 42 | } 43 | 44 | if ($parseInline && !empty($css)) { 45 | if (is_string($css)) { 46 | $css = [$css]; 47 | } 48 | 49 | $cssData = $this->includeStyles($css); 50 | $html = $this->inlineStyleParser->parseInlineHtml($html, $cssData, $isFragment); 51 | } 52 | 53 | return $html; 54 | } 55 | 56 | public function includeStyles(array $styles = []): string 57 | { 58 | $style = ''; 59 | foreach ($styles as $styleFile) { 60 | $path = $this->fileLocator->locate($styleFile); 61 | $style .= "\n\n" . file_get_contents($path); 62 | } 63 | 64 | return $style; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/Twig/Extension/InlineStyleExtension.php: -------------------------------------------------------------------------------- 1 | $this->inlineStyleParser, 43 | 'emailizr_locator' => $this->fileLocator, 44 | 'emailizr_style_collector' => new CssCollector() 45 | ]; 46 | } 47 | 48 | public function getFunctions(): array 49 | { 50 | return [ 51 | new TwigFunction('emailizr_inline_style', [$this, 'includeStyles']) 52 | ]; 53 | } 54 | 55 | public function getTokenParsers(): array 56 | { 57 | return [ 58 | new InlineStyleTokenParser() 59 | ]; 60 | } 61 | 62 | public function includeStyles(CssCollector $styles): string 63 | { 64 | $style = ''; 65 | foreach ($styles as $styleFile) { 66 | $path = $this->fileLocator->locate($styleFile); 67 | $style .= "\n\n" . file_get_contents($path); 68 | } 69 | 70 | return $style; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/Twig/Node/InlineStyleNode.php: -------------------------------------------------------------------------------- 1 | $html], [], $line, $tag); 27 | } 28 | 29 | public function compile(Compiler $compiler): void 30 | { 31 | $node = new CaptureNode( 32 | $this->getNode('html'), 33 | $this->getNode('html')->lineno 34 | ); 35 | 36 | $node->setAttribute('with_blocks', true); 37 | 38 | $compiler 39 | ->write(sprintf('$inlineCssFiles = "";%s', PHP_EOL)) 40 | ->write(sprintf('foreach($context["emailizr_style_collector"] as $cssFile) {%s', PHP_EOL)) 41 | ->indent() 42 | ->write(sprintf('$path = $context["emailizr_locator"]->locate($cssFile);%s', PHP_EOL)) 43 | ->write(sprintf('if ($path) {%s', PHP_EOL)) 44 | ->indent() 45 | ->write(sprintf('$inlineCssFiles .= "\n".file_get_contents($path);%s', PHP_EOL)) 46 | ->outdent() 47 | ->write(sprintf('}%s', PHP_EOL)) 48 | ->outdent() 49 | ->write(sprintf('}%1$s%1$s', PHP_EOL)) 50 | ->write(sprintf('$%s = ', 'inlineHtml')) 51 | ->subcompile($node) 52 | ->raw(sprintf('%1$s%1$s', PHP_EOL)) 53 | ->write(sprintf('yield $context["emailizr_inline_style_parser"]->parseInlineHtml($inlineHtml, $inlineCssFiles);%s', PHP_EOL)) 54 | ->write(sprintf('$context["emailizr_style_collector"]->removeAll();%1$s%1$s', PHP_EOL)); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/Twig/Parser/InlineStyleTokenParser.php: -------------------------------------------------------------------------------- 1 | parser; 31 | $stream = $parser->getStream(); 32 | $stream->expect(Token::BLOCK_END_TYPE); 33 | $html = $this->parser->subparse([$this, 'decideEnd'], true); 34 | $stream->expect(Token::BLOCK_END_TYPE); 35 | 36 | return new InlineStyleNode($html, $token->getLine(), $this->getTag()); 37 | } 38 | 39 | public function getTag(): string 40 | { 41 | return self::TAG; 42 | } 43 | 44 | public function decideEnd(Token $token): bool 45 | { 46 | return $token->test(sprintf('end_%s', self::TAG)); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /templates/layout.html.twig: -------------------------------------------------------------------------------- 1 | {% apply spaceless %} 2 | {{ emailizr_style_collector.add('@EmailizrBundle/public/css/foundation-for-emails/foundation.min.css') }} 3 | {% emailizr_inline_style %} 4 | 5 | 6 | 7 | 8 | 9 | {% block headStyles %} 10 | 15 | {% endblock %} 16 | 17 | {% apply inky_to_html %} 18 | 19 | {% block body %} 20 | 21 | 22 | 23 | {% block content %} 24 | {% endblock %} 25 | 26 | 27 | 28 | 29 |
                                                           
30 | {% endblock %} 31 | 32 | {% endapply %} 33 | 34 | {% end_emailizr_inline_style %} 35 | {% endapply %} --------------------------------------------------------------------------------