├── .gitignore ├── scss ├── components │ ├── _outlook-first.scss │ ├── _thumbnail.scss │ ├── _menu.scss │ ├── _visibility.scss │ ├── _normalize.scss │ ├── _alignment.scss │ ├── _callout.scss │ ├── _media-query.scss │ ├── _button.scss │ └── _type.scss ├── grid │ ├── _block-grid.scss │ └── _grid.scss ├── util │ └── _util.scss ├── styles.scss ├── _foundation.scss └── settings │ └── _settings.scss ├── package.json ├── gulpfile.js ├── templates └── basic.html ├── dist ├── basic.html └── styles.css └── css └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /scss/components/_outlook-first.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Emails by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group outlook 7 | //// 8 | 9 | body.outlook p { 10 | display: inline !important; 11 | } 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "email-starter-template", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "gulp": "^3.9.1", 13 | "gulp-inline-css": "^3.1.0", 14 | "gulp-inline-source": "^3.0.0", 15 | "gulp-sass": "^2.2.0", 16 | "inky": "^1.3.4" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /scss/grid/_block-grid.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Emails by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group block-grid 7 | //// 8 | 9 | /// The highest number of `.x-up` classes available when using the block grid CSS. 10 | /// @type Number 11 | $block-grid-max: 8 !default; 12 | 13 | /// Gutter between elements in a block grid. 14 | /// @type Number 15 | $block-grid-gutter: $global-gutter !default; 16 | 17 | .block-grid { 18 | width: 100%; 19 | max-width: $global-width; 20 | 21 | td { 22 | display: inline-block; 23 | padding: $block-grid-gutter / 2; 24 | } 25 | } 26 | 27 | // Sizing classes 28 | @for $i from 2 through $block-grid-max { 29 | .up-#{$i} td { 30 | width: floor(($global-width - $i * $block-grid-gutter) / $i) !important; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | sass = require('gulp-sass'), 3 | inky = require('inky'), 4 | inlineCss = require('gulp-inline-css'), 5 | inlinesource = require('gulp-inline-source'); 6 | 7 | 8 | //STYLES 9 | gulp.task('styles', function () { 10 | return gulp.src('./scss/*.scss') 11 | .pipe(sass().on('error', sass.logError)) 12 | .pipe(gulp.dest('./css')); 13 | }); 14 | 15 | //CONVERTE INKY 16 | gulp.task('inky', ['styles'], function() { 17 | return gulp.src('./templates/**/*.html') 18 | .pipe(inlinesource()) 19 | .pipe(inky()) 20 | .pipe(inlineCss({ 21 | preserveMediaQueries: true, 22 | removeLinkTags: false 23 | })) 24 | .pipe(gulp.dest('./dist')); 25 | }); 26 | 27 | //WATCH 28 | gulp.task('default',function() { 29 | gulp.watch(['./scss/**/*.scss', './templates/**/*.html'],['inky']); 30 | }); 31 | -------------------------------------------------------------------------------- /scss/util/_util.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Emails by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | /// Calculates a percentage value for a grid column width. 6 | /// @access private 7 | /// @param {number} $colNumber - Column count of the column. 8 | /// @param {number} $totalColumns - Column count of the entire row. 9 | /// @returns {number} A percentage width value. 10 | @function -zf-grid-calc-pct($colNumber, $totalColumns) { 11 | @return floor(percentage(($colNumber / $totalColumns)) * 1000000) / 1000000; 12 | } 13 | 14 | /// Calculates a pixel value for a grid column width. 15 | /// @access private 16 | /// @param {number} $columnNumber - Column count of the column. 17 | /// @param {number} $totalColumns - Column count of the entire row. 18 | /// @param {number} $containerWidth - Width of the surrounding container, in pixels. 19 | /// @returns {number} A pixel width value. 20 | @function -zf-grid-calc-px($columnNumber, $totalColumns, $containerWidth) { 21 | @return ($containerWidth / $totalColumns * $columnNumber - $global-gutter); 22 | } 23 | -------------------------------------------------------------------------------- /scss/styles.scss: -------------------------------------------------------------------------------- 1 | @import "foundation"; 2 | 3 | .no-bg { 4 | background: transparent !important; 5 | } 6 | 7 | .custom-pb { 8 | padding-bottom: 10px !important; 9 | } 10 | 11 | .tiny-text { 12 | font-size: 12px; 13 | } 14 | 15 | .text-uppercase { 16 | text-transform: uppercase; 17 | } 18 | 19 | .basic-link { 20 | text-decoration: underline; 21 | color: #000; 22 | } 23 | 24 | .main-sub-heading { 25 | color: $grey; 26 | text-transform: uppercase; 27 | margin: 0; 28 | font-size: 20px; 29 | } 30 | 31 | .main-heading { 32 | text-transform: uppercase; 33 | margin: 0; 34 | font-size: 22px; 35 | } 36 | 37 | .main-body-p { 38 | color: $grey; 39 | line-height: (22/14); 40 | } 41 | 42 | .decorative-line { 43 | background: $grey; 44 | height: 2px; 45 | } 46 | 47 | .item-name { 48 | text-transform: uppercase; 49 | color: $accent; 50 | } 51 | 52 | .item-price { 53 | color: $grey; 54 | } 55 | 56 | table.button { 57 | margin-bottom: 0; 58 | table { 59 | td { 60 | padding: map-get($button-padding, default); 61 | a { 62 | padding: 0px; 63 | } 64 | } 65 | } 66 | } -------------------------------------------------------------------------------- /scss/_foundation.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Emails by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import 6 | 'util/util', 7 | 'settings/settings', 8 | 'components/normalize', 9 | 'grid/grid', 10 | 'grid/block-grid', 11 | 'components/alignment', 12 | 'components/visibility', 13 | 'components/type', 14 | 'components/button', 15 | 'components/callout', 16 | 'components/thumbnail', 17 | 'components/menu', 18 | 'components/outlook-first', 19 | 'components/media-query'; 20 | 21 | 22 | 23 | 24 | .footer-drip { 25 | background: #F3F3F3; 26 | border-radius: 0 0 10px 10px; 27 | } 28 | 29 | .footer-drip .columns { 30 | padding-top: 16px; 31 | } 32 | 33 | .container.header-drip { 34 | background: #F3F3F3; 35 | } 36 | 37 | .container.header-drip .columns { 38 | padding-bottom: 16px; 39 | padding-top: 16px; 40 | } 41 | 42 | .container.body-drip { 43 | border-radius: 10px; 44 | border-top: 10px solid #663399; 45 | } 46 | 47 | 48 | 49 | 50 | .header { 51 | background: #8a8a8a; 52 | } 53 | 54 | .header p { 55 | color: #ffffff; 56 | margin: 0; 57 | } 58 | 59 | .header .columns { 60 | padding-bottom: 0; 61 | } 62 | 63 | .header .container { 64 | background: #8a8a8a; 65 | padding-top: 16px; 66 | padding-bottom: 16px; 67 | } 68 | 69 | .header .container td { 70 | padding-top: 16px; 71 | padding-bottom: 16px; 72 | } -------------------------------------------------------------------------------- /scss/components/_thumbnail.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Emails by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group thumbnial 7 | //// 8 | 9 | /// Border around thumbnail images. 10 | /// @type Border 11 | $thumbnail-border: solid 4px $white !default; 12 | 13 | /// Bottom margin for thumbnail images. 14 | /// @type Length 15 | $thumbnail-margin-bottom: $global-margin !default; 16 | 17 | /// Box shadow under thumbnail images. 18 | /// @type Shadow 19 | $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2) !default; 20 | 21 | /// Box shadow under thumbnail images. 22 | /// @type Shadow 23 | $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5) !default; 24 | 25 | /// Transition proprties for thumbnail images. 26 | /// @type Transition 27 | $thumbnail-transition: box-shadow 200ms ease-out !default; 28 | 29 | /// Default radius for thumbnail images. 30 | /// @type Number 31 | $thumbnail-radius: $global-radius !default; 32 | 33 | /// Adds thumbnail styles to an element. 34 | .thumbnail { 35 | border: $thumbnail-border; 36 | box-shadow: $thumbnail-shadow; 37 | display: inline-block; 38 | line-height: 0; 39 | max-width: 100%; 40 | transition: $thumbnail-transition; 41 | border-radius: $thumbnail-radius; 42 | margin-bottom: $thumbnail-margin-bottom; 43 | 44 | &:hover, 45 | &:focus { 46 | box-shadow: $thumbnail-shadow-hover; 47 | } 48 | } 49 | 50 | -------------------------------------------------------------------------------- /scss/components/_menu.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Emails by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group menu 7 | //// 8 | 9 | /// Padding inside a menu item. 10 | /// @type Length 11 | $menu-item-padding: 10px !default; 12 | 13 | /// Right-hand spacing of items in menus with the `.simple` class. 14 | /// @type Length 15 | $menu-item-gutter: 10px !default; 16 | 17 | /// This is the color of the menu item links. 18 | /// @type Color 19 | $menu-item-color: $primary-color !default; 20 | 21 | 22 | table.menu { 23 | width: $global-width; 24 | 25 | td.menu-item, 26 | th.menu-item{ 27 | padding: $menu-item-padding; 28 | padding-right: $menu-item-gutter; 29 | 30 | a { 31 | color: $menu-item-color; 32 | } 33 | } 34 | } 35 | 36 | // Doesn't work on the pesky ESPs like outlook 2000 37 | table.menu.vertical { 38 | td.menu-item, 39 | th.menu-item { 40 | padding: $menu-item-padding; 41 | padding-right: 0; 42 | display: block; 43 | 44 | a { 45 | width: 100%; 46 | } 47 | } 48 | 49 | // Nested lists need some more padding to the left 50 | td.menu-item, 51 | th.menu-item { 52 | table.menu.vertical { 53 | td.menu-item, 54 | th.menu-item { 55 | padding-left: $menu-item-padding; 56 | } 57 | } 58 | } 59 | } 60 | 61 | table.menu.text-center a { 62 | text-align: center; 63 | } 64 | 65 | //Centers the menus! 66 | .menu[align="center"] { 67 | width: auto !important; 68 | } -------------------------------------------------------------------------------- /scss/components/_visibility.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Emails by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group visibility 7 | //// 8 | 9 | table.body table.container .hide-for-large { 10 | display: none; 11 | width:0; 12 | mso-hide:all; // hide selected elements in Outlook 2007-2013 13 | overflow:hidden; 14 | max-height: 0px; 15 | font-size: 0; 16 | width: 0px; 17 | line-height: 0; 18 | 19 | @media only screen and (max-width: #{$global-breakpoint}) { 20 | display: block !important; 21 | width: auto !important; 22 | overflow: visible !important; 23 | } 24 | } 25 | 26 | table.body table.container .hide-for-large * { 27 | mso-hide:all; // hide selected elements in Outlook 2007-2013 28 | } 29 | 30 | table.body table.container .row.hide-for-large, 31 | table.body table.container .row.hide-for-large { 32 | @media only screen and (max-width: #{$global-breakpoint}) { 33 | display: table !important; 34 | width: 100% !important; 35 | } 36 | } 37 | 38 | table.body table.container .show-for-large { 39 | @media only screen and (max-width: #{$global-breakpoint}) { 40 | display: none !important; 41 | width:0; 42 | mso-hide:all; // hide selected elements in Outlook 2007-2013 43 | overflow:hidden; 44 | } 45 | } 46 | 47 | // [todo] add image resets 48 | // img { 49 | // max-height: 0; 50 | // width: 0; 51 | // } 52 | // in media query 53 | // img { 54 | // max-height: none !important; 55 | // width: auto !important; 56 | // } 57 | 58 | -------------------------------------------------------------------------------- /scss/components/_normalize.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Emails by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group normalize 7 | //// 8 | 9 | $paragraph-margin-bottom: 10px !default; 10 | 11 | #outlook a { 12 | padding: 0; 13 | } 14 | 15 | body { 16 | width: 100% !important; 17 | min-width: 100%; 18 | -webkit-text-size-adjust: 100%; 19 | -ms-text-size-adjust: 100%; 20 | margin: 0; 21 | Margin: 0; 22 | padding: 0; 23 | -moz-box-sizing: border-box; 24 | -webkit-box-sizing: border-box; 25 | box-sizing: border-box; 26 | } 27 | 28 | .ExternalClass { 29 | width: 100%; 30 | 31 | &, 32 | p, 33 | span, 34 | font, 35 | td, 36 | div { 37 | line-height: 100%; 38 | } 39 | } 40 | 41 | #backgroundTable { 42 | margin: 0; 43 | Margin: 0; 44 | padding: 0; 45 | width: 100% !important; 46 | line-height: 100% !important; 47 | } 48 | 49 | img { 50 | outline: none; 51 | text-decoration: none; 52 | -ms-interpolation-mode: bicubic; 53 | width: auto; 54 | max-width: 100%; 55 | clear: both; 56 | display: block; 57 | } 58 | 59 | center { 60 | width: 100%; 61 | min-width: $global-width; 62 | } 63 | 64 | a img { 65 | border: none; 66 | } 67 | 68 | p { 69 | margin: 0 0 0 $paragraph-margin-bottom; 70 | Margin: 0 0 0 $paragraph-margin-bottom; 71 | } 72 | 73 | table { 74 | border-spacing: 0; 75 | border-collapse: collapse; 76 | } 77 | 78 | td { 79 | word-wrap: break-word; 80 | -webkit-hyphens: auto; 81 | -moz-hyphens: auto; 82 | hyphens: auto; 83 | border-collapse: collapse !important; 84 | } 85 | 86 | table, tr, td { 87 | padding: 0; 88 | vertical-align: top; 89 | text-align: left; 90 | } 91 | -------------------------------------------------------------------------------- /scss/components/_alignment.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Emails by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group alignment 7 | //// 8 | 9 | table.text-center, 10 | td.text-center, 11 | h1.text-center, 12 | h2.text-center, 13 | h3.text-center, 14 | h4.text-center, 15 | h5.text-center, 16 | h6.text-center, 17 | p.text-center, 18 | span.text-center { 19 | text-align: center; 20 | } 21 | 22 | h1.text-left, 23 | h2.text-left, 24 | h3.text-left, 25 | h4.text-left, 26 | h5.text-left, 27 | h6.text-left, 28 | p.text-left, 29 | span.text-left { 30 | text-align: left; 31 | } 32 | 33 | h1.text-right, 34 | h2.text-right, 35 | h3.text-right, 36 | h4.text-right, 37 | h5.text-right, 38 | h6.text-right, 39 | p.text-right, 40 | span.text-right { 41 | text-align: right; 42 | } 43 | 44 | span.text-center { 45 | display: block; 46 | width: 100%; 47 | text-align: center; 48 | } 49 | 50 | @media only screen and (max-width: #{$global-breakpoint}) { 51 | .small-float-center { 52 | margin: 0 auto !important; 53 | float: none !important; 54 | text-align: center !important; 55 | } 56 | 57 | .small-text-center { 58 | text-align: center !important; 59 | } 60 | 61 | .small-text-left { 62 | text-align: left !important; 63 | } 64 | 65 | .small-text-right { 66 | text-align: right !important; 67 | } 68 | } 69 | 70 | img.float-left { 71 | float: left; 72 | text-align: left; 73 | } 74 | 75 | img.float-right { 76 | float: right; 77 | text-align: right; 78 | } 79 | 80 | img.float-center, 81 | img.text-center { 82 | margin: 0 auto; 83 | Margin: 0 auto; 84 | float: none; 85 | text-align: center; 86 | } 87 | 88 | table.float-center, 89 | td.float-center, 90 | th.float-center { 91 | margin: 0 auto; 92 | Margin: 0 auto; 93 | float: none; 94 | text-align: center; 95 | } 96 | 97 | 98 | -------------------------------------------------------------------------------- /scss/components/_callout.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Emails by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group callout 7 | //// 8 | 9 | /// Background color of a callout. 10 | /// @type Color 11 | $callout-background: $white !default; 12 | 13 | /// Fade value for callout backgrounds. 14 | /// @type Number 15 | $callout-background-fade: 85% !default; 16 | 17 | /// Padding inside a callout. 18 | /// @type Length 19 | $callout-padding: 10px !default; 20 | 21 | /// Bottom margin of a callout. 22 | /// @type Length 23 | $callout-margin-bottom: $global-margin !default; 24 | 25 | /// Border around a callout. 26 | /// @type Border 27 | $callout-border: 1px solid darken($callout-background, 20%) !default; 28 | 29 | /// Border around a callout with the `.success` class. 30 | /// @type Border 31 | $callout-border-secondary: 1px solid darken($secondary-color, 20%) !default; 32 | 33 | /// Border around a callout with the `.success` class. 34 | /// @type Border 35 | $callout-border-success: 1px solid darken($success-color, 20%) !default; 36 | 37 | /// Border around a callout with the `.warning` class. 38 | /// @type Border 39 | $callout-border-warning: 1px solid darken($warning-color, 20%) !default; 40 | 41 | /// Border around a callout with the `.alert` class. 42 | /// @type Border 43 | $callout-border-alert: 1px solid darken($alert-color, 20%) !default; 44 | 45 | table.callout { 46 | margin-bottom: $callout-margin-bottom; 47 | Margin-bottom: $callout-margin-bottom; 48 | } 49 | 50 | th.callout-inner { 51 | width: 100%; 52 | border: $callout-border; 53 | padding: $callout-padding; 54 | background: $callout-background; 55 | 56 | &.primary { 57 | background: scale-color($primary-color, $lightness: $callout-background-fade); 58 | border: $callout-border-secondary; 59 | color: $black; 60 | } 61 | 62 | &.secondary { 63 | background: scale-color($secondary-color, $lightness: $callout-background-fade); 64 | border: $callout-border-secondary; 65 | color: $black; 66 | } 67 | 68 | &.success { 69 | background: scale-color($success-color, $lightness: $callout-background-fade); 70 | border: $callout-border-success; 71 | color: $white; 72 | } 73 | 74 | &.warning { 75 | background: scale-color($warning-color, $lightness: $callout-background-fade); 76 | border: $callout-border-warning; 77 | color: $white; 78 | } 79 | 80 | &.alert { 81 | background: scale-color($alert-color, $lightness: $callout-background-fade); 82 | border: $callout-border-alert; 83 | color: $white; 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /scss/grid/_grid.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Emails by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group grid 7 | //// 8 | 9 | /// Default number of columns for an email. 10 | /// @type Number 11 | $grid-column-count: 12 !default; 12 | 13 | /// Default padding for the bottom of a column. 14 | /// @type Number 15 | $column-padding-bottom: $global-padding !default; 16 | 17 | //For viewing email in browser 18 | html { 19 | min-height: 100%; 20 | background: $body-background; 21 | } 22 | 23 | table { 24 | &.body { 25 | background: $body-background; 26 | height: 100%; 27 | width: 100%; 28 | } 29 | 30 | &.container { 31 | background: $container-background; 32 | width: $global-width; 33 | margin: 0 auto; 34 | Margin: 0 auto; 35 | text-align: inherit; 36 | } 37 | 38 | &.row { 39 | padding: 0; 40 | width: 100%; 41 | position: relative; 42 | } 43 | } 44 | 45 | table.container table.row { 46 | display: table; 47 | } 48 | 49 | td.columns, 50 | td.column, 51 | th.columns, 52 | th.column { 53 | margin: 0 auto; 54 | Margin: 0 auto; 55 | padding-left: $global-gutter; 56 | padding-bottom: $column-padding-bottom; 57 | } 58 | 59 | td.columns.last, 60 | td.column.last, 61 | th.columns.last, 62 | th.column.last { 63 | padding-right: $global-gutter; 64 | } 65 | 66 | //makes sure nested tables are 100% width 67 | td.columns, 68 | td.column, 69 | th.columns, 70 | th.column { 71 | table { 72 | width: 100%; 73 | } 74 | } 75 | 76 | @for $i from 1 through $grid-column-count { 77 | td.large-#{$i}, 78 | th.large-#{$i} { 79 | width: -zf-grid-calc-px($i, $grid-column-count, $global-width); 80 | padding-left: $global-gutter / 2; 81 | padding-right: $global-gutter / 2; 82 | } 83 | 84 | td.large-#{$i}.first, 85 | th.large-#{$i}.first { 86 | padding-left: $global-gutter; 87 | } 88 | 89 | td.large-#{$i}.last, 90 | th.large-#{$i}.last { 91 | padding-right: $global-gutter; 92 | } 93 | 94 | //Collapsed logic 95 | .collapse { 96 | > tbody > tr > td.large-#{$i}, 97 | > tbody > tr > th.large-#{$i} { 98 | padding-right: 0; 99 | padding-left: 0; 100 | width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter; 101 | } 102 | 103 | //Gotta give it that extra love for the first and last columns. 104 | td.large-#{$i}.first, 105 | th.large-#{$i}.first, 106 | td.large-#{$i}.last, 107 | th.large-#{$i}.last { 108 | width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($global-gutter * 1.5); 109 | } 110 | } 111 | } 112 | 113 | @for $i from 1 through $grid-column-count { 114 | td.large-#{$i} center, 115 | th.large-#{$i} center { 116 | min-width: -zf-grid-calc-px($i, $grid-column-count, $global-width) - ($global-gutter * 2); 117 | } 118 | } 119 | 120 | @for $i from 1 through $grid-column-count { 121 | .body .columns td.large-#{$i}, 122 | .body .column td.large-#{$i}, 123 | .body .columns th.large-#{$i}, 124 | .body .column th.large-#{$i} { 125 | width: -zf-grid-calc-pct($i, $grid-column-count); 126 | } 127 | } 128 | 129 | @for $i from 1 through ($grid-column-count - 1) { 130 | td.large-offset-#{$i}, 131 | td.large-offset-#{$i}.first, 132 | td.large-offset-#{$i}.last, 133 | th.large-offset-#{$i}, 134 | th.large-offset-#{$i}.first, 135 | th.large-offset-#{$i}.last { 136 | //1.5 takes in effect a whole empty cell. 137 | padding-left: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter * 2; 138 | } 139 | } 140 | 141 | td.expander, 142 | th.expander { 143 | visibility: hidden; 144 | width: 0; 145 | padding: 0 !important; 146 | } 147 | -------------------------------------------------------------------------------- /scss/components/_media-query.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Emails by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group media-query 7 | //// 8 | 9 | @media only screen and (max-width: #{$global-breakpoint}) { 10 | table.body img { 11 | width: auto !important; 12 | height: auto !important; 13 | } 14 | 15 | table.body center { 16 | min-width: 0 !important; 17 | } 18 | 19 | table.body .container { 20 | width: $global-width-small !important; 21 | } 22 | 23 | //If it supports border-box, why not? Am I right? 24 | //Also, by default pad that to the global-gutter variable 25 | table.body .columns, 26 | table.body .column { 27 | height: auto !important; 28 | -moz-box-sizing: border-box; 29 | -webkit-box-sizing: border-box; 30 | box-sizing: border-box; 31 | padding-left: $global-gutter !important; 32 | padding-right: $global-gutter !important; 33 | 34 | // Nested columns won't double the padding 35 | .column, 36 | .columns { 37 | padding-left: 0 !important; 38 | padding-right: 0 !important; 39 | } 40 | } 41 | 42 | // Collpased columns have no gutter. 43 | .collapse { 44 | table.body & .columns, 45 | table.body & .column { 46 | padding-left: 0 !important; 47 | padding-right: 0 !important; 48 | } 49 | } 50 | 51 | //Basic grid rules 52 | @for $i from 1 through $grid-column-count { 53 | td.small-#{$i}, 54 | th.small-#{$i} { 55 | display: inline-block !important; 56 | width: -zf-grid-calc-pct($i, $grid-column-count) !important; 57 | } 58 | } 59 | 60 | //If it's the last column in column count (12 by default), 61 | //give it block and 100% width to knock down the wimpy columns to their own row. 62 | .columns td.small-#{$grid-column-count}, 63 | .column td.small-#{$grid-column-count}, 64 | .columns th.small-#{$grid-column-count}, 65 | .column th.small-#{$grid-column-count} { 66 | display: block !important; 67 | width: 100% !important; 68 | } 69 | 70 | 71 | //Rules for the Center Tag 72 | @for $i from 1 through ($grid-column-count - 1) { 73 | .body .columns td.small-#{$i}, 74 | .body .column td.small-#{$i}, 75 | td.small-#{$i} center, 76 | 77 | .body .columns th.small-#{$i}, 78 | .body .column th.small-#{$i}, 79 | th.small-#{$i} center { 80 | display: inline-block !important; 81 | width: -zf-grid-calc-pct($i, $grid-column-count) !important; 82 | } 83 | } 84 | 85 | @for $i from 1 through ($grid-column-count - 1) { 86 | table.body td.small-offset-#{$i}, 87 | table.body th.small-offset-#{$i} { 88 | //1.5 takes in effect a whole empty cell. 89 | margin-left: -zf-grid-calc-pct($i, $grid-column-count) !important; 90 | Margin-left: -zf-grid-calc-pct($i, $grid-column-count) !important; 91 | } 92 | } 93 | 94 | table.body table.columns td.expander, 95 | table.body table.columns th.expander { 96 | display: none !important; 97 | } 98 | 99 | table.body .right-text-pad, 100 | table.body .text-pad-right { 101 | padding-left: $text-padding !important; 102 | } 103 | 104 | table.body .left-text-pad, 105 | table.body .text-pad-left { 106 | padding-right: $text-padding !important; 107 | } 108 | 109 | //menu 110 | table.menu { 111 | width: 100% !important; 112 | 113 | td, 114 | th { 115 | width: auto !important; 116 | display: inline-block !important; 117 | } 118 | 119 | &.vertical, &.small-vertical { 120 | td, 121 | th { 122 | display: block !important; 123 | } 124 | } 125 | } 126 | 127 | //Centers the menus! 128 | table.menu[align="center"] { 129 | width: auto !important; 130 | } 131 | 132 | //Buttons 133 | table.button.expand { 134 | width: 100% !important; 135 | } 136 | } 137 | 138 | -------------------------------------------------------------------------------- /scss/settings/_settings.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Emails Settings 2 | // ------------------------------ 3 | // 4 | // Table of Contents: 5 | // 6 | // 1. Global 7 | // 2. Grid 8 | // 3. Block Grid 9 | // 4. Typography 10 | // 5. Button 11 | // 6. Callout 12 | // 7. Menu 13 | // 8. Thumbnial 14 | 15 | 16 | 17 | //colors: 18 | $yellow: #FBF18E; 19 | $accent: #F61067; 20 | $grey: #666666; 21 | 22 | // 1. Global 23 | // --------- 24 | 25 | $primary-color: $accent; 26 | $secondary-color: #777777; 27 | $success-color: #3adb76; 28 | $warning-color: #ffae00; 29 | $alert-color: #ec5840; 30 | $light-gray: #f3f3f3; 31 | $medium-gray: #cacaca; 32 | $dark-gray: #8a8a8a; 33 | $black: #000000; 34 | $white: #ffffff; 35 | $pre-color: #ff6908; 36 | $global-width: 580px; 37 | $global-width-small: 95%; 38 | $global-gutter: 16px; 39 | $body-background: $yellow; 40 | $container-background: $white; 41 | $global-font-color: $black; 42 | $body-font-family: Arial, sans-serif; 43 | $global-padding: 16px; 44 | $global-margin: 16px; 45 | $global-radius: 3px; 46 | $global-rounded: 500px; 47 | $global-breakpoint: $global-width + $global-gutter; 48 | 49 | // 2. Grid 50 | // ------- 51 | 52 | $grid-column-count: 12; 53 | $column-padding-bottom: $global-padding; 54 | 55 | // 3. Block Grid 56 | // ------------- 57 | 58 | $block-grid-max: 8; 59 | $block-grid-gutter: $global-gutter; 60 | 61 | // 4. Typography 62 | // ------------- 63 | 64 | $global-font-weight: normal; 65 | $header-color: inherit; 66 | $global-line-height: 1.3; 67 | $global-font-size: 14px; 68 | $body-line-height: 19px; 69 | $header-font-family: $body-font-family; 70 | $header-font-weight: bold; 71 | $h1-font-size: 22px; 72 | $h2-font-size: 16px; 73 | $h3-font-size: 14px; 74 | $h4-font-size: 24px; 75 | $h5-font-size: 20px; 76 | $h6-font-size: 18px; 77 | $header-margin-bottom: 0; 78 | $paragraph-margin-bottom: 10px; 79 | $small-font-size: 80%; 80 | $small-font-color: $medium-gray; 81 | $lead-font-size: $global-font-size * 1.25; 82 | $lead-line-height: 1.6; 83 | $text-padding: 10px; 84 | $subheader-lineheight: 1.4; 85 | $subheader-color: $dark-gray; 86 | $subheader-font-weight: $global-font-weight; 87 | $subheader-margin-top: 4px; 88 | $subheader-margin-bottom: 8px; 89 | $hr-width: $global-width; 90 | $hr-border: 1px solid $medium-gray; 91 | $hr-margin: 20px auto; 92 | $anchor-text-decoration: none; 93 | $anchor-color: $primary-color; 94 | $anchor-color-visited: $anchor-color; 95 | $anchor-color-hover: darken($primary-color, 10%); 96 | $anchor-color-active: $anchor-color-hover; 97 | $stat-font-size: 40px; 98 | 99 | // 5. Button 100 | // --------- 101 | 102 | $button-padding: ( 103 | tiny: 4px 8px 4px 8px, 104 | small: 5px 10px 5px 10px, 105 | default: 12px 35px 12px 35px, 106 | large: 10px 20px 10px 20px, 107 | ); 108 | $button-font-size: ( 109 | tiny: 10px, 110 | small: 12px, 111 | default: 16px, 112 | large: 20px, 113 | ); 114 | $button-color: $accent; 115 | $button-color-alt: $medium-gray; 116 | $button-font-weight: normal; 117 | $button-margin: 0 0 $global-margin 0; 118 | $button-background: transparent; 119 | $button-border: 2px solid $accent; 120 | $button-radius: 0; 121 | $button-rounded: $global-rounded; 122 | 123 | // 6. Callout 124 | // ---------- 125 | 126 | $callout-background: $white; 127 | $callout-background-fade: 85%; 128 | $callout-padding: 10px; 129 | $callout-margin-bottom: $global-margin; 130 | $callout-border: 1px solid darken($callout-background, 20%); 131 | $callout-border-secondary: 1px solid darken($secondary-color, 20%); 132 | $callout-border-success: 1px solid darken($success-color, 20%); 133 | $callout-border-warning: 1px solid darken($warning-color, 20%); 134 | $callout-border-alert: 1px solid darken($alert-color, 20%); 135 | 136 | // 7. Menu 137 | // ------- 138 | 139 | $menu-item-padding: 10px; 140 | $menu-item-gutter: 10px; 141 | $menu-item-color: $primary-color; 142 | 143 | // 8. Thumbnial 144 | // ------------ 145 | 146 | $thumbnail-border: solid 4px $white; 147 | $thumbnail-margin-bottom: $global-margin; 148 | $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); 149 | $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); 150 | $thumbnail-transition: box-shadow 200ms ease-out; 151 | $thumbnail-radius: $global-radius; 152 | 153 | -------------------------------------------------------------------------------- /templates/basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 113 | 114 |
16 |
17 | 18 | 19 | 20 | 21 | 22 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente placeat, est mollitia laudantium amet aut.

23 | 24 | 25 |

View this email in your browser

26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 36 | 37 | 38 |
34 | Summer 2016 35 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 |

Meet the

47 |

Lorem collection

48 | 49 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat nemo quasi obcaecati sapiente tempore tenetur non consequuntur aspernatur id similique fuga esse, quaerat, eos dolore quisquam molestias molestiae velit dolor? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quam nam aut, at ipsa! Iur

50 | 51 |
52 | 53 |
54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 |

Deals of the week

66 | 67 | 68 | 69 | 70 | 71 | 72 |
73 | 74 | 75 | 76 | 77 | 78 | 79 |
item
80 |

Item Name

81 |

$16.99

82 | 83 | 84 |
item
85 |

Item Name

86 |

$16.99

87 | 88 | 89 |
item
90 |

Item Name

91 |

$16.99

92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 |

102 | unsubscribe from this list | 103 | unsubscribe from this list 104 |

105 | 106 | 107 | 108 | 109 | 110 | 111 |
112 |
115 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /scss/components/_button.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Emails by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group button 7 | //// 8 | 9 | /// Padding inside buttons at various sizes. 10 | /// @type Map 11 | $button-padding: ( 12 | tiny: 4px 8px 4px 8px, 13 | small: 5px 10px 5px 10px, 14 | default: 8px 16px 8px 16px, 15 | large: 10px 20px 10px 20px, 16 | ) !default; 17 | 18 | /// Font sizes of buttons at various sizes. 19 | /// @type Map 20 | $button-font-size: ( 21 | tiny: 10px, 22 | small: 12px, 23 | default: 16px, 24 | large: 20px, 25 | ) !default; 26 | 27 | /// Text color of buttons. 28 | /// @type Color 29 | $button-color: $white !default; 30 | 31 | /// Text color of buttons with a light background. 32 | /// @type Color 33 | $button-color-alt: $medium-gray !default; 34 | 35 | /// Font weight of buttons. 36 | /// @type Weight 37 | $button-font-weight: bold !default; 38 | 39 | /// Margin around buttons. 40 | /// @type List 41 | $button-margin: 0 0 $global-margin 0 !default; 42 | 43 | /// Background color of buttons. 44 | /// @type Color 45 | $button-background: $primary-color !default; 46 | 47 | /// Border around buttons. 48 | /// @type Border 49 | $button-border: 2px solid $button-background !default; 50 | 51 | /// Border radius of buttons. Not supported by all email clients. 52 | /// @type Number 53 | $button-radius: $global-radius !default; 54 | 55 | /// Border radius of rounded buttons. Not supported by all email clients. 56 | /// @type Number 57 | $button-rounded: $global-rounded !default; 58 | 59 | table.button { 60 | width: auto !important; 61 | margin: $button-margin; 62 | Margin: $button-margin; 63 | 64 | table { 65 | 66 | td { 67 | text-align: left; 68 | color: $button-color; 69 | background: $button-background; 70 | border: 2px solid $accent; 71 | 72 | &.radius { 73 | border-radius: $button-radius; 74 | } 75 | 76 | &.rounded { 77 | border-radius: $button-rounded; 78 | } 79 | 80 | a { 81 | font-family: $body-font-family; 82 | font-size: map-get($button-font-size, default); 83 | font-weight: $button-font-weight; 84 | color: $button-color; 85 | text-decoration: none; 86 | display: inline-block; 87 | padding: map-get($button-padding, default); 88 | border: 0px solid $button-background; 89 | border-radius: $button-radius; 90 | text-transform: uppercase; 91 | } 92 | } 93 | } 94 | } 95 | 96 | table.button:hover table tr td a, 97 | table.button:active table tr td a, 98 | table.button table tr td a:visited, 99 | table.button.tiny:hover table tr td a, 100 | table.button.tiny:active table tr td a, 101 | table.button.tiny table tr td a:visited, 102 | table.button.small:hover table tr td a, 103 | table.button.small:active table tr td a, 104 | table.button.small table tr td a:visited, 105 | table.button.large:hover table tr td a, 106 | table.button.large:active table tr td a, 107 | table.button.large table tr td a:visited { 108 | color: $button-color; 109 | } 110 | 111 | table.button.tiny { 112 | table { 113 | td, 114 | a { 115 | padding: map-get($button-padding, tiny); 116 | } 117 | 118 | a { 119 | font-size: map-get($button-font-size, tiny); 120 | font-weight: normal; 121 | } 122 | } 123 | } 124 | 125 | table.button.small { 126 | table { 127 | td, 128 | a { 129 | padding: map-get($button-padding, small); 130 | font-size: map-get($button-font-size, small); 131 | } 132 | } 133 | } 134 | 135 | table.button.large { 136 | table { 137 | a { 138 | padding: map-get($button-padding, large); 139 | font-size: map-get($button-font-size, large); 140 | } 141 | } 142 | } 143 | 144 | table.expand, 145 | table.expanded { 146 | width: 100% !important; 147 | 148 | table { 149 | width: 100%; 150 | 151 | a { 152 | text-align: center; 153 | } 154 | } 155 | 156 | center { 157 | min-width: 0; 158 | } 159 | } 160 | 161 | table.button:hover, 162 | table.button:visited, 163 | table.button:active { 164 | table { 165 | td { 166 | background: darken($button-background, 10%); 167 | color: $button-color; 168 | } 169 | } 170 | } 171 | 172 | table.button:hover, 173 | table.button:visited, 174 | table.button:active { 175 | table { 176 | a { 177 | border: 0px solid darken($button-background, 10%); 178 | } 179 | } 180 | } 181 | 182 | table.button.secondary { 183 | table { 184 | td { 185 | background: $secondary-color; 186 | color: $button-color; 187 | border: 2px solid $secondary-color; 188 | } 189 | 190 | a { 191 | color: $button-color; 192 | border: 0px solid $secondary-color; 193 | } 194 | } 195 | } 196 | 197 | table.button.secondary:hover { 198 | table { 199 | td { 200 | background: lighten($secondary-color, 10%); 201 | color: $button-color; 202 | } 203 | 204 | a { 205 | border: 0px solid lighten($secondary-color, 10%); 206 | } 207 | } 208 | } 209 | 210 | table.button.secondary:hover { 211 | table { 212 | td a { 213 | color: $button-color; 214 | } 215 | } 216 | } 217 | 218 | table.button.secondary:active { 219 | table { 220 | td a { 221 | color: $button-color; 222 | } 223 | } 224 | } 225 | 226 | table.button.secondary { 227 | table { 228 | td a:visited { 229 | color: $button-color; 230 | } 231 | } 232 | } 233 | 234 | table.button.success { 235 | table { 236 | td { 237 | background: $success-color; 238 | border: 2px solid $success-color; 239 | } 240 | 241 | a { 242 | border: 0px solid $success-color; 243 | } 244 | } 245 | } 246 | 247 | table.button.success:hover { 248 | table { 249 | td { 250 | background: darken($success-color, 10%); 251 | } 252 | 253 | a { 254 | border: 0px solid darken($success-color, 10%); 255 | } 256 | } 257 | } 258 | 259 | table.button.alert { 260 | table { 261 | td { 262 | background: $alert-color; 263 | border: 2px solid $alert-color; 264 | } 265 | 266 | a { 267 | border: 0px solid $alert-color; 268 | } 269 | } 270 | } 271 | 272 | table.button.alert:hover { 273 | table { 274 | td { 275 | background: darken($alert-color, 10%); 276 | } 277 | 278 | a { 279 | border: 0px solid darken($alert-color, 10%); 280 | } 281 | } 282 | } 283 | -------------------------------------------------------------------------------- /scss/components/_type.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Emails by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group typography 7 | //// 8 | 9 | /// Global font weight. 10 | /// @type Keyword 11 | $global-font-weight: normal !default; 12 | 13 | /// Global font weight. 14 | /// @type Keyword 15 | $header-color: inherit !default; 16 | 17 | /// Global line height. 18 | /// @type Number 19 | $global-line-height: 1.3 !default; 20 | 21 | /// Font size of body text. 22 | /// @type Number 23 | $global-font-size: 16px !default; 24 | 25 | /// Line height of body text. 26 | /// @type Number 27 | $body-line-height: 19px !default; 28 | 29 | /// Font family of headings. 30 | /// @type List 31 | $header-font-family: $body-font-family !default; 32 | 33 | /// Font family of headings. 34 | /// @type List 35 | $header-font-weight: $global-font-weight !default; 36 | 37 | /// Font size of `

` elements. 38 | /// @type Number 39 | $h1-font-size: 34px !default; 40 | 41 | /// Font size of `

` elements. 42 | /// @type Number 43 | $h2-font-size: 30px !default; 44 | 45 | /// Font size of `

` elements. 46 | /// @type Number 47 | $h3-font-size: 28px !default; 48 | 49 | /// Font size of `

` elements. 50 | /// @type Number 51 | $h4-font-size: 24px !default; 52 | 53 | /// Font size of `

` elements. 54 | /// @type Number 55 | $h5-font-size: 20px !default; 56 | 57 | /// Font size of `
` elements. 58 | /// @type Number 59 | $h6-font-size: 18px !default; 60 | 61 | /// Margin bottom of `

` through `

` elements. 62 | /// @type Number 63 | $header-margin-bottom: 10px !default; 64 | 65 | /// Margin bottom of paragraphs. 66 | /// @type Number 67 | $paragraph-margin-bottom: 10px !default; 68 | 69 | /// Default font size for ``. 70 | /// @type Number 71 | $small-font-size: 80% !default; 72 | 73 | /// Color of `` elements when placed inside headers. 74 | /// @type Color 75 | $small-font-color: $medium-gray !default; 76 | 77 | /// Font size of lead paragraphs. 78 | /// @type Number 79 | $lead-font-size: $global-font-size * 1.25 !default; 80 | 81 | /// Line height of lead paragraphs. 82 | /// @type Number 83 | $lead-line-height: 1.6 !default; 84 | 85 | /// Padding inside paragraphs. 86 | /// @type Number 87 | $text-padding: 10px !default; 88 | 89 | /// Default line height for subheaders. 90 | /// @type Number 91 | $subheader-lineheight: 1.4 !default; 92 | 93 | /// Default font color for subheaders. 94 | /// @type Color 95 | $subheader-color: $dark-gray !default; 96 | 97 | /// Default font weight for subheaders. 98 | /// @type String 99 | $subheader-font-weight: $global-font-weight !default; 100 | 101 | /// Default top margin for subhheaders. 102 | /// @type Number 103 | $subheader-margin-top: 4px !default; 104 | 105 | /// Default bottom margin for subheaders. 106 | /// @type Number 107 | $subheader-margin-bottom: 8px !default; 108 | 109 | /// Maximum width of a divider. 110 | /// @type Number 111 | $hr-width: $global-width !default; 112 | 113 | /// Default border for a divider. 114 | /// @type List 115 | $hr-border: 1px solid $medium-gray !default; 116 | 117 | /// Default margin for a divider. 118 | /// @type Number | List 119 | $hr-margin: 20px auto !default; 120 | 121 | /// Text decoration for anchors. 122 | /// @type Keyword 123 | $anchor-text-decoration: none !default; 124 | 125 | /// Text color of anchors. 126 | /// @type Color 127 | $anchor-color: $primary-color !default; 128 | 129 | /// Text color of anchors to visited links. 130 | /// @type Color 131 | $anchor-color-visited: $anchor-color !default; 132 | 133 | /// Text color of anchors on hover. 134 | /// @type Color 135 | $anchor-color-hover: darken($primary-color, 10%) !default; 136 | 137 | /// Text color of active anchors. 138 | /// @type Color 139 | $anchor-color-active: $anchor-color-hover !default; 140 | 141 | /// Default font size for statistic numbers. 142 | /// @type Number 143 | $stat-font-size: 40px !default; 144 | 145 | body, 146 | table.body, 147 | h1, 148 | h2, 149 | h3, 150 | h4, 151 | h5, 152 | h6, 153 | p, 154 | td, 155 | th, 156 | a { 157 | color: $global-font-color; 158 | font-family: $body-font-family; 159 | font-weight: $global-font-weight; 160 | padding: 0; 161 | margin: 0; 162 | Margin: 0; 163 | text-align: left; 164 | line-height: $global-line-height; 165 | } 166 | 167 | h1, 168 | h2, 169 | h3, 170 | h4, 171 | h5, 172 | h6 { 173 | color: $header-color; 174 | word-wrap: normal; 175 | font-family: $header-font-family; 176 | font-weight: $header-font-weight; 177 | margin-bottom: $header-margin-bottom; 178 | Margin-bottom: $header-margin-bottom; 179 | } 180 | 181 | h1 { 182 | font-size: $h1-font-size; 183 | } 184 | 185 | h2 { 186 | font-size: $h2-font-size; 187 | } 188 | 189 | h3 { 190 | font-size: $h3-font-size; 191 | } 192 | 193 | h4 { 194 | font-size: $h4-font-size; 195 | } 196 | 197 | h5 { 198 | font-size: $h5-font-size; 199 | } 200 | 201 | h6 { 202 | font-size: $h6-font-size; 203 | } 204 | 205 | body, 206 | table.body, 207 | p, 208 | td, 209 | th { 210 | font-size: $global-font-size; 211 | line-height: $body-line-height; 212 | } 213 | 214 | p { 215 | margin-bottom: $paragraph-margin-bottom; 216 | Margin-bottom: $paragraph-margin-bottom; 217 | 218 | &.lead { 219 | font-size: $lead-font-size; 220 | line-height: $lead-line-height; 221 | } 222 | 223 | &.subheader { 224 | margin-top: $subheader-margin-top; 225 | margin-bottom: $subheader-margin-bottom; 226 | Margin-top: $subheader-margin-top; 227 | Margin-bottom: $subheader-margin-bottom; 228 | font-weight: $subheader-font-weight; 229 | line-height: $subheader-lineheight; 230 | color: $subheader-color; 231 | } 232 | } 233 | 234 | small { 235 | font-size: $small-font-size; 236 | color: $small-font-color; 237 | } 238 | 239 | a { 240 | color: $anchor-color; 241 | text-decoration: none; 242 | 243 | &:hover { 244 | color: $anchor-color-hover; 245 | } 246 | 247 | &:active { 248 | color: $anchor-color-active; 249 | } 250 | 251 | &:visited { 252 | color: $anchor-color-visited; 253 | } 254 | } 255 | 256 | h1 a, 257 | h1 a:visited, 258 | h2 a, 259 | h2 a:visited, 260 | h3 a, 261 | h3 a:visited, 262 | h4 a, 263 | h4 a:visited, 264 | h5 a, 265 | h5 a:visited, 266 | h6 a, 267 | h6 a:visited { 268 | color: $anchor-color; 269 | } 270 | 271 | pre { 272 | background: $light-gray; 273 | margin: 30px 0; 274 | Margin: 30px 0; 275 | 276 | code { 277 | color: $medium-gray; 278 | 279 | span.callout { 280 | color: $dark-gray; 281 | font-weight: bold; 282 | } 283 | 284 | span.callout-strong { 285 | color: $pre-color; 286 | font-weight: bold; 287 | } 288 | } 289 | } 290 | 291 | // Horizontal rule 292 | 293 | hr { 294 | max-width: $hr-width; 295 | height: 0; 296 | border-right: 0; 297 | border-top: 0; 298 | border-bottom: $hr-border; 299 | border-left: 0; 300 | margin: $hr-margin; 301 | Margin: $hr-margin; 302 | clear: both; 303 | } 304 | 305 | // Use to style a large number to display a statistic 306 | .stat { 307 | font-size: $stat-font-size; 308 | line-height: 1; 309 | 310 | p + & { 311 | margin-top: -16px; 312 | Margin-top: -16px; 313 | } 314 | } 315 | 316 | 317 | -------------------------------------------------------------------------------- /dist/basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 192 | 193 | 194 | 195 | 196 | 363 | 364 |
197 |
198 | 199 |
 
200 |
201 | 202 | 211 | 220 |
203 | 204 | 205 | 208 | 209 |
206 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente placeat, est mollitia laudantium amet aut.

207 |
210 | 		212 | 213 | 214 | 217 | 218 |
215 |

View this email in your browser

216 |
219 |
221 |
222 | 223 | 224 | 225 | 226 | 229 | 230 | 231 |
227 | Summer 2016 228 |
232 | 233 |
 
234 | 235 |
236 | 237 | 256 |
238 | 239 | 240 | 252 | 253 | 254 |
241 |
 
242 |

Meet the

243 |

Lorem collection

244 |
 
245 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat nemo quasi obcaecati sapiente tempore tenetur non consequuntur aspernatur id similique fuga esse, quaerat, eos dolore quisquam molestias molestiae velit dolor? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quam nam aut, at ipsa! Iur

246 |
 
247 |
248 |
Shop now
249 |
250 |
 
251 |
255 |
257 |
258 | 259 |
 
260 | 261 |
262 | 263 | 274 |
264 | 265 | 266 | 270 | 271 | 272 |
267 |
 
268 |

Deals of the week

269 |
273 |
275 | 276 | 277 | 284 | 293 | 300 |
278 | 279 | 280 | 281 | 282 |
283 | 		285 | 286 | 287 | 290 | 291 |
288 |
289 |
292 | 		294 | 295 | 296 | 297 | 298 |
299 |
301 | 302 | 303 | 314 | 325 | 336 |
304 | 305 | 306 | 311 | 312 |
307 |
item
308 |

Item Name

309 |

$16.99

310 |
313 | 		315 | 316 | 317 | 322 | 323 |
318 |
item
319 |

Item Name

320 |

$16.99

321 |
324 | 		326 | 327 | 328 | 333 | 334 |
329 |
item
330 |

Item Name

331 |

$16.99

332 |
335 |
337 |
338 | 339 |
 
340 | 341 |
342 | 343 | 356 |
344 | 345 | 346 | 352 | 353 | 354 |
347 |

348 | unsubscribe from this list | 349 | unsubscribe from this list 350 |

351 |
355 |
357 |
358 | 359 |
 
360 | 361 |
362 |
365 | 366 | 367 | 368 | -------------------------------------------------------------------------------- /dist/styles.css: -------------------------------------------------------------------------------- 1 | #outlook a { 2 | padding: 0; } 3 | 4 | body { 5 | width: 100% !important; 6 | min-width: 100%; 7 | -webkit-text-size-adjust: 100%; 8 | -ms-text-size-adjust: 100%; 9 | margin: 0; 10 | Margin: 0; 11 | padding: 0; 12 | -moz-box-sizing: border-box; 13 | -webkit-box-sizing: border-box; 14 | box-sizing: border-box; } 15 | 16 | .ExternalClass { 17 | width: 100%; } 18 | .ExternalClass, 19 | .ExternalClass p, 20 | .ExternalClass span, 21 | .ExternalClass font, 22 | .ExternalClass td, 23 | .ExternalClass div { 24 | line-height: 100%; } 25 | 26 | #backgroundTable { 27 | margin: 0; 28 | Margin: 0; 29 | padding: 0; 30 | width: 100% !important; 31 | line-height: 100% !important; } 32 | 33 | img { 34 | outline: none; 35 | text-decoration: none; 36 | -ms-interpolation-mode: bicubic; 37 | width: auto; 38 | max-width: 100%; 39 | clear: both; 40 | display: block; } 41 | 42 | center { 43 | width: 100%; 44 | min-width: 580px; } 45 | 46 | a img { 47 | border: none; } 48 | 49 | p { 50 | margin: 0 0 0 10px; 51 | Margin: 0 0 0 10px; } 52 | 53 | table { 54 | border-spacing: 0; 55 | border-collapse: collapse; } 56 | 57 | td { 58 | word-wrap: break-word; 59 | -webkit-hyphens: auto; 60 | -moz-hyphens: auto; 61 | hyphens: auto; 62 | border-collapse: collapse !important; } 63 | 64 | table, tr, td { 65 | padding: 0; 66 | vertical-align: top; 67 | text-align: left; } 68 | 69 | html { 70 | min-height: 100%; 71 | background: #FBF18E; } 72 | 73 | table.body { 74 | background: #FBF18E; 75 | height: 100%; 76 | width: 100%; } 77 | 78 | table.container { 79 | background: #ffffff; 80 | width: 580px; 81 | margin: 0 auto; 82 | Margin: 0 auto; 83 | text-align: inherit; } 84 | 85 | table.row { 86 | padding: 0; 87 | width: 100%; 88 | position: relative; } 89 | 90 | table.container table.row { 91 | display: table; } 92 | 93 | td.columns, 94 | td.column, 95 | th.columns, 96 | th.column { 97 | margin: 0 auto; 98 | Margin: 0 auto; 99 | padding-left: 16px; 100 | padding-bottom: 16px; } 101 | 102 | td.columns.last, 103 | td.column.last, 104 | th.columns.last, 105 | th.column.last { 106 | padding-right: 16px; } 107 | 108 | td.columns table, 109 | td.column table, 110 | th.columns table, 111 | th.column table { 112 | width: 100%; } 113 | 114 | td.large-1, 115 | th.large-1 { 116 | width: 32.33333px; 117 | padding-left: 8px; 118 | padding-right: 8px; } 119 | 120 | td.large-1.first, 121 | th.large-1.first { 122 | padding-left: 16px; } 123 | 124 | td.large-1.last, 125 | th.large-1.last { 126 | padding-right: 16px; } 127 | 128 | .collapse > tbody > tr > td.large-1, 129 | .collapse > tbody > tr > th.large-1 { 130 | padding-right: 0; 131 | padding-left: 0; 132 | width: 48.33333px; } 133 | 134 | .collapse td.large-1.first, 135 | .collapse th.large-1.first, 136 | .collapse td.large-1.last, 137 | .collapse th.large-1.last { 138 | width: 56.33333px; } 139 | 140 | td.large-2, 141 | th.large-2 { 142 | width: 80.66667px; 143 | padding-left: 8px; 144 | padding-right: 8px; } 145 | 146 | td.large-2.first, 147 | th.large-2.first { 148 | padding-left: 16px; } 149 | 150 | td.large-2.last, 151 | th.large-2.last { 152 | padding-right: 16px; } 153 | 154 | .collapse > tbody > tr > td.large-2, 155 | .collapse > tbody > tr > th.large-2 { 156 | padding-right: 0; 157 | padding-left: 0; 158 | width: 96.66667px; } 159 | 160 | .collapse td.large-2.first, 161 | .collapse th.large-2.first, 162 | .collapse td.large-2.last, 163 | .collapse th.large-2.last { 164 | width: 104.66667px; } 165 | 166 | td.large-3, 167 | th.large-3 { 168 | width: 129px; 169 | padding-left: 8px; 170 | padding-right: 8px; } 171 | 172 | td.large-3.first, 173 | th.large-3.first { 174 | padding-left: 16px; } 175 | 176 | td.large-3.last, 177 | th.large-3.last { 178 | padding-right: 16px; } 179 | 180 | .collapse > tbody > tr > td.large-3, 181 | .collapse > tbody > tr > th.large-3 { 182 | padding-right: 0; 183 | padding-left: 0; 184 | width: 145px; } 185 | 186 | .collapse td.large-3.first, 187 | .collapse th.large-3.first, 188 | .collapse td.large-3.last, 189 | .collapse th.large-3.last { 190 | width: 153px; } 191 | 192 | td.large-4, 193 | th.large-4 { 194 | width: 177.33333px; 195 | padding-left: 8px; 196 | padding-right: 8px; } 197 | 198 | td.large-4.first, 199 | th.large-4.first { 200 | padding-left: 16px; } 201 | 202 | td.large-4.last, 203 | th.large-4.last { 204 | padding-right: 16px; } 205 | 206 | .collapse > tbody > tr > td.large-4, 207 | .collapse > tbody > tr > th.large-4 { 208 | padding-right: 0; 209 | padding-left: 0; 210 | width: 193.33333px; } 211 | 212 | .collapse td.large-4.first, 213 | .collapse th.large-4.first, 214 | .collapse td.large-4.last, 215 | .collapse th.large-4.last { 216 | width: 201.33333px; } 217 | 218 | td.large-5, 219 | th.large-5 { 220 | width: 225.66667px; 221 | padding-left: 8px; 222 | padding-right: 8px; } 223 | 224 | td.large-5.first, 225 | th.large-5.first { 226 | padding-left: 16px; } 227 | 228 | td.large-5.last, 229 | th.large-5.last { 230 | padding-right: 16px; } 231 | 232 | .collapse > tbody > tr > td.large-5, 233 | .collapse > tbody > tr > th.large-5 { 234 | padding-right: 0; 235 | padding-left: 0; 236 | width: 241.66667px; } 237 | 238 | .collapse td.large-5.first, 239 | .collapse th.large-5.first, 240 | .collapse td.large-5.last, 241 | .collapse th.large-5.last { 242 | width: 249.66667px; } 243 | 244 | td.large-6, 245 | th.large-6 { 246 | width: 274px; 247 | padding-left: 8px; 248 | padding-right: 8px; } 249 | 250 | td.large-6.first, 251 | th.large-6.first { 252 | padding-left: 16px; } 253 | 254 | td.large-6.last, 255 | th.large-6.last { 256 | padding-right: 16px; } 257 | 258 | .collapse > tbody > tr > td.large-6, 259 | .collapse > tbody > tr > th.large-6 { 260 | padding-right: 0; 261 | padding-left: 0; 262 | width: 290px; } 263 | 264 | .collapse td.large-6.first, 265 | .collapse th.large-6.first, 266 | .collapse td.large-6.last, 267 | .collapse th.large-6.last { 268 | width: 298px; } 269 | 270 | td.large-7, 271 | th.large-7 { 272 | width: 322.33333px; 273 | padding-left: 8px; 274 | padding-right: 8px; } 275 | 276 | td.large-7.first, 277 | th.large-7.first { 278 | padding-left: 16px; } 279 | 280 | td.large-7.last, 281 | th.large-7.last { 282 | padding-right: 16px; } 283 | 284 | .collapse > tbody > tr > td.large-7, 285 | .collapse > tbody > tr > th.large-7 { 286 | padding-right: 0; 287 | padding-left: 0; 288 | width: 338.33333px; } 289 | 290 | .collapse td.large-7.first, 291 | .collapse th.large-7.first, 292 | .collapse td.large-7.last, 293 | .collapse th.large-7.last { 294 | width: 346.33333px; } 295 | 296 | td.large-8, 297 | th.large-8 { 298 | width: 370.66667px; 299 | padding-left: 8px; 300 | padding-right: 8px; } 301 | 302 | td.large-8.first, 303 | th.large-8.first { 304 | padding-left: 16px; } 305 | 306 | td.large-8.last, 307 | th.large-8.last { 308 | padding-right: 16px; } 309 | 310 | .collapse > tbody > tr > td.large-8, 311 | .collapse > tbody > tr > th.large-8 { 312 | padding-right: 0; 313 | padding-left: 0; 314 | width: 386.66667px; } 315 | 316 | .collapse td.large-8.first, 317 | .collapse th.large-8.first, 318 | .collapse td.large-8.last, 319 | .collapse th.large-8.last { 320 | width: 394.66667px; } 321 | 322 | td.large-9, 323 | th.large-9 { 324 | width: 419px; 325 | padding-left: 8px; 326 | padding-right: 8px; } 327 | 328 | td.large-9.first, 329 | th.large-9.first { 330 | padding-left: 16px; } 331 | 332 | td.large-9.last, 333 | th.large-9.last { 334 | padding-right: 16px; } 335 | 336 | .collapse > tbody > tr > td.large-9, 337 | .collapse > tbody > tr > th.large-9 { 338 | padding-right: 0; 339 | padding-left: 0; 340 | width: 435px; } 341 | 342 | .collapse td.large-9.first, 343 | .collapse th.large-9.first, 344 | .collapse td.large-9.last, 345 | .collapse th.large-9.last { 346 | width: 443px; } 347 | 348 | td.large-10, 349 | th.large-10 { 350 | width: 467.33333px; 351 | padding-left: 8px; 352 | padding-right: 8px; } 353 | 354 | td.large-10.first, 355 | th.large-10.first { 356 | padding-left: 16px; } 357 | 358 | td.large-10.last, 359 | th.large-10.last { 360 | padding-right: 16px; } 361 | 362 | .collapse > tbody > tr > td.large-10, 363 | .collapse > tbody > tr > th.large-10 { 364 | padding-right: 0; 365 | padding-left: 0; 366 | width: 483.33333px; } 367 | 368 | .collapse td.large-10.first, 369 | .collapse th.large-10.first, 370 | .collapse td.large-10.last, 371 | .collapse th.large-10.last { 372 | width: 491.33333px; } 373 | 374 | td.large-11, 375 | th.large-11 { 376 | width: 515.66667px; 377 | padding-left: 8px; 378 | padding-right: 8px; } 379 | 380 | td.large-11.first, 381 | th.large-11.first { 382 | padding-left: 16px; } 383 | 384 | td.large-11.last, 385 | th.large-11.last { 386 | padding-right: 16px; } 387 | 388 | .collapse > tbody > tr > td.large-11, 389 | .collapse > tbody > tr > th.large-11 { 390 | padding-right: 0; 391 | padding-left: 0; 392 | width: 531.66667px; } 393 | 394 | .collapse td.large-11.first, 395 | .collapse th.large-11.first, 396 | .collapse td.large-11.last, 397 | .collapse th.large-11.last { 398 | width: 539.66667px; } 399 | 400 | td.large-12, 401 | th.large-12 { 402 | width: 564px; 403 | padding-left: 8px; 404 | padding-right: 8px; } 405 | 406 | td.large-12.first, 407 | th.large-12.first { 408 | padding-left: 16px; } 409 | 410 | td.large-12.last, 411 | th.large-12.last { 412 | padding-right: 16px; } 413 | 414 | .collapse > tbody > tr > td.large-12, 415 | .collapse > tbody > tr > th.large-12 { 416 | padding-right: 0; 417 | padding-left: 0; 418 | width: 580px; } 419 | 420 | .collapse td.large-12.first, 421 | .collapse th.large-12.first, 422 | .collapse td.large-12.last, 423 | .collapse th.large-12.last { 424 | width: 588px; } 425 | 426 | td.large-1 center, 427 | th.large-1 center { 428 | min-width: 0.33333px; } 429 | 430 | td.large-2 center, 431 | th.large-2 center { 432 | min-width: 48.66667px; } 433 | 434 | td.large-3 center, 435 | th.large-3 center { 436 | min-width: 97px; } 437 | 438 | td.large-4 center, 439 | th.large-4 center { 440 | min-width: 145.33333px; } 441 | 442 | td.large-5 center, 443 | th.large-5 center { 444 | min-width: 193.66667px; } 445 | 446 | td.large-6 center, 447 | th.large-6 center { 448 | min-width: 242px; } 449 | 450 | td.large-7 center, 451 | th.large-7 center { 452 | min-width: 290.33333px; } 453 | 454 | td.large-8 center, 455 | th.large-8 center { 456 | min-width: 338.66667px; } 457 | 458 | td.large-9 center, 459 | th.large-9 center { 460 | min-width: 387px; } 461 | 462 | td.large-10 center, 463 | th.large-10 center { 464 | min-width: 435.33333px; } 465 | 466 | td.large-11 center, 467 | th.large-11 center { 468 | min-width: 483.66667px; } 469 | 470 | td.large-12 center, 471 | th.large-12 center { 472 | min-width: 532px; } 473 | 474 | .body .columns td.large-1, 475 | .body .column td.large-1, 476 | .body .columns th.large-1, 477 | .body .column th.large-1 { 478 | width: 8.33333%; } 479 | 480 | .body .columns td.large-2, 481 | .body .column td.large-2, 482 | .body .columns th.large-2, 483 | .body .column th.large-2 { 484 | width: 16.66667%; } 485 | 486 | .body .columns td.large-3, 487 | .body .column td.large-3, 488 | .body .columns th.large-3, 489 | .body .column th.large-3 { 490 | width: 25%; } 491 | 492 | .body .columns td.large-4, 493 | .body .column td.large-4, 494 | .body .columns th.large-4, 495 | .body .column th.large-4 { 496 | width: 33.33333%; } 497 | 498 | .body .columns td.large-5, 499 | .body .column td.large-5, 500 | .body .columns th.large-5, 501 | .body .column th.large-5 { 502 | width: 41.66667%; } 503 | 504 | .body .columns td.large-6, 505 | .body .column td.large-6, 506 | .body .columns th.large-6, 507 | .body .column th.large-6 { 508 | width: 50%; } 509 | 510 | .body .columns td.large-7, 511 | .body .column td.large-7, 512 | .body .columns th.large-7, 513 | .body .column th.large-7 { 514 | width: 58.33333%; } 515 | 516 | .body .columns td.large-8, 517 | .body .column td.large-8, 518 | .body .columns th.large-8, 519 | .body .column th.large-8 { 520 | width: 66.66667%; } 521 | 522 | .body .columns td.large-9, 523 | .body .column td.large-9, 524 | .body .columns th.large-9, 525 | .body .column th.large-9 { 526 | width: 75%; } 527 | 528 | .body .columns td.large-10, 529 | .body .column td.large-10, 530 | .body .columns th.large-10, 531 | .body .column th.large-10 { 532 | width: 83.33333%; } 533 | 534 | .body .columns td.large-11, 535 | .body .column td.large-11, 536 | .body .columns th.large-11, 537 | .body .column th.large-11 { 538 | width: 91.66667%; } 539 | 540 | .body .columns td.large-12, 541 | .body .column td.large-12, 542 | .body .columns th.large-12, 543 | .body .column th.large-12 { 544 | width: 100%; } 545 | 546 | td.large-offset-1, 547 | td.large-offset-1.first, 548 | td.large-offset-1.last, 549 | th.large-offset-1, 550 | th.large-offset-1.first, 551 | th.large-offset-1.last { 552 | padding-left: 64.33333px; } 553 | 554 | td.large-offset-2, 555 | td.large-offset-2.first, 556 | td.large-offset-2.last, 557 | th.large-offset-2, 558 | th.large-offset-2.first, 559 | th.large-offset-2.last { 560 | padding-left: 112.66667px; } 561 | 562 | td.large-offset-3, 563 | td.large-offset-3.first, 564 | td.large-offset-3.last, 565 | th.large-offset-3, 566 | th.large-offset-3.first, 567 | th.large-offset-3.last { 568 | padding-left: 161px; } 569 | 570 | td.large-offset-4, 571 | td.large-offset-4.first, 572 | td.large-offset-4.last, 573 | th.large-offset-4, 574 | th.large-offset-4.first, 575 | th.large-offset-4.last { 576 | padding-left: 209.33333px; } 577 | 578 | td.large-offset-5, 579 | td.large-offset-5.first, 580 | td.large-offset-5.last, 581 | th.large-offset-5, 582 | th.large-offset-5.first, 583 | th.large-offset-5.last { 584 | padding-left: 257.66667px; } 585 | 586 | td.large-offset-6, 587 | td.large-offset-6.first, 588 | td.large-offset-6.last, 589 | th.large-offset-6, 590 | th.large-offset-6.first, 591 | th.large-offset-6.last { 592 | padding-left: 306px; } 593 | 594 | td.large-offset-7, 595 | td.large-offset-7.first, 596 | td.large-offset-7.last, 597 | th.large-offset-7, 598 | th.large-offset-7.first, 599 | th.large-offset-7.last { 600 | padding-left: 354.33333px; } 601 | 602 | td.large-offset-8, 603 | td.large-offset-8.first, 604 | td.large-offset-8.last, 605 | th.large-offset-8, 606 | th.large-offset-8.first, 607 | th.large-offset-8.last { 608 | padding-left: 402.66667px; } 609 | 610 | td.large-offset-9, 611 | td.large-offset-9.first, 612 | td.large-offset-9.last, 613 | th.large-offset-9, 614 | th.large-offset-9.first, 615 | th.large-offset-9.last { 616 | padding-left: 451px; } 617 | 618 | td.large-offset-10, 619 | td.large-offset-10.first, 620 | td.large-offset-10.last, 621 | th.large-offset-10, 622 | th.large-offset-10.first, 623 | th.large-offset-10.last { 624 | padding-left: 499.33333px; } 625 | 626 | td.large-offset-11, 627 | td.large-offset-11.first, 628 | td.large-offset-11.last, 629 | th.large-offset-11, 630 | th.large-offset-11.first, 631 | th.large-offset-11.last { 632 | padding-left: 547.66667px; } 633 | 634 | td.expander, 635 | th.expander { 636 | visibility: hidden; 637 | width: 0; 638 | padding: 0 !important; } 639 | 640 | .block-grid { 641 | width: 100%; 642 | max-width: 580px; } 643 | .block-grid td { 644 | display: inline-block; 645 | padding: 8px; } 646 | 647 | .up-2 td { 648 | width: 274px !important; } 649 | 650 | .up-3 td { 651 | width: 177px !important; } 652 | 653 | .up-4 td { 654 | width: 129px !important; } 655 | 656 | .up-5 td { 657 | width: 100px !important; } 658 | 659 | .up-6 td { 660 | width: 80px !important; } 661 | 662 | .up-7 td { 663 | width: 66px !important; } 664 | 665 | .up-8 td { 666 | width: 56px !important; } 667 | 668 | table.text-center, 669 | td.text-center, 670 | h1.text-center, 671 | h2.text-center, 672 | h3.text-center, 673 | h4.text-center, 674 | h5.text-center, 675 | h6.text-center, 676 | p.text-center, 677 | span.text-center { 678 | text-align: center; } 679 | 680 | h1.text-left, 681 | h2.text-left, 682 | h3.text-left, 683 | h4.text-left, 684 | h5.text-left, 685 | h6.text-left, 686 | p.text-left, 687 | span.text-left { 688 | text-align: left; } 689 | 690 | h1.text-right, 691 | h2.text-right, 692 | h3.text-right, 693 | h4.text-right, 694 | h5.text-right, 695 | h6.text-right, 696 | p.text-right, 697 | span.text-right { 698 | text-align: right; } 699 | 700 | span.text-center { 701 | display: block; 702 | width: 100%; 703 | text-align: center; } 704 | 705 | @media only screen and (max-width: 596px) { 706 | .small-float-center { 707 | margin: 0 auto !important; 708 | float: none !important; 709 | text-align: center !important; } 710 | .small-text-center { 711 | text-align: center !important; } 712 | .small-text-left { 713 | text-align: left !important; } 714 | .small-text-right { 715 | text-align: right !important; } } 716 | 717 | img.float-left { 718 | float: left; 719 | text-align: left; } 720 | 721 | img.float-right { 722 | float: right; 723 | text-align: right; } 724 | 725 | img.float-center, 726 | img.text-center { 727 | margin: 0 auto; 728 | Margin: 0 auto; 729 | float: none; 730 | text-align: center; } 731 | 732 | table.float-center, 733 | td.float-center, 734 | th.float-center { 735 | margin: 0 auto; 736 | Margin: 0 auto; 737 | float: none; 738 | text-align: center; } 739 | 740 | table.body table.container .hide-for-large { 741 | display: none; 742 | width: 0; 743 | mso-hide: all; 744 | overflow: hidden; 745 | max-height: 0px; 746 | font-size: 0; 747 | width: 0px; 748 | line-height: 0; } 749 | @media only screen and (max-width: 596px) { 750 | table.body table.container .hide-for-large { 751 | display: block !important; 752 | width: auto !important; 753 | overflow: visible !important; } } 754 | 755 | table.body table.container .hide-for-large * { 756 | mso-hide: all; } 757 | 758 | @media only screen and (max-width: 596px) { 759 | table.body table.container .row.hide-for-large, 760 | table.body table.container .row.hide-for-large { 761 | display: table !important; 762 | width: 100% !important; } } 763 | 764 | @media only screen and (max-width: 596px) { 765 | table.body table.container .show-for-large { 766 | display: none !important; 767 | width: 0; 768 | mso-hide: all; 769 | overflow: hidden; } } 770 | 771 | body, 772 | table.body, 773 | h1, 774 | h2, 775 | h3, 776 | h4, 777 | h5, 778 | h6, 779 | p, 780 | td, 781 | th, 782 | a { 783 | color: #000000; 784 | font-family: Arial, sans-serif; 785 | font-weight: normal; 786 | padding: 0; 787 | margin: 0; 788 | Margin: 0; 789 | text-align: left; 790 | line-height: 1.3; } 791 | 792 | h1, 793 | h2, 794 | h3, 795 | h4, 796 | h5, 797 | h6 { 798 | color: inherit; 799 | word-wrap: normal; 800 | font-family: Arial, sans-serif; 801 | font-weight: bold; 802 | margin-bottom: 0; 803 | Margin-bottom: 0; } 804 | 805 | h1 { 806 | font-size: 22px; } 807 | 808 | h2 { 809 | font-size: 16px; } 810 | 811 | h3 { 812 | font-size: 14px; } 813 | 814 | h4 { 815 | font-size: 24px; } 816 | 817 | h5 { 818 | font-size: 20px; } 819 | 820 | h6 { 821 | font-size: 18px; } 822 | 823 | body, 824 | table.body, 825 | p, 826 | td, 827 | th { 828 | font-size: 14px; 829 | line-height: 19px; } 830 | 831 | p { 832 | margin-bottom: 10px; 833 | Margin-bottom: 10px; } 834 | p.lead { 835 | font-size: 17.5px; 836 | line-height: 1.6; } 837 | p.subheader { 838 | margin-top: 4px; 839 | margin-bottom: 8px; 840 | Margin-top: 4px; 841 | Margin-bottom: 8px; 842 | font-weight: normal; 843 | line-height: 1.4; 844 | color: #8a8a8a; } 845 | 846 | small { 847 | font-size: 80%; 848 | color: #cacaca; } 849 | 850 | a { 851 | color: #F61067; 852 | text-decoration: none; } 853 | a:hover { 854 | color: #cb0852; } 855 | a:active { 856 | color: #cb0852; } 857 | a:visited { 858 | color: #F61067; } 859 | 860 | h1 a, 861 | h1 a:visited, 862 | h2 a, 863 | h2 a:visited, 864 | h3 a, 865 | h3 a:visited, 866 | h4 a, 867 | h4 a:visited, 868 | h5 a, 869 | h5 a:visited, 870 | h6 a, 871 | h6 a:visited { 872 | color: #F61067; } 873 | 874 | pre { 875 | background: #f3f3f3; 876 | margin: 30px 0; 877 | Margin: 30px 0; } 878 | pre code { 879 | color: #cacaca; } 880 | pre code span.callout { 881 | color: #8a8a8a; 882 | font-weight: bold; } 883 | pre code span.callout-strong { 884 | color: #ff6908; 885 | font-weight: bold; } 886 | 887 | hr { 888 | max-width: 580px; 889 | height: 0; 890 | border-right: 0; 891 | border-top: 0; 892 | border-bottom: 1px solid #cacaca; 893 | border-left: 0; 894 | margin: 20px auto; 895 | Margin: 20px auto; 896 | clear: both; } 897 | 898 | .stat { 899 | font-size: 40px; 900 | line-height: 1; } 901 | p + .stat { 902 | margin-top: -16px; 903 | Margin-top: -16px; } 904 | 905 | table.button { 906 | width: auto !important; 907 | margin: 0 0 16px 0; 908 | Margin: 0 0 16px 0; } 909 | table.button table td { 910 | text-align: left; 911 | color: #F61067; 912 | background: transparent; 913 | border: 2px solid #F61067; } 914 | table.button table td.radius { 915 | border-radius: 0; } 916 | table.button table td.rounded { 917 | border-radius: 500px; } 918 | table.button table td a { 919 | font-family: Arial, sans-serif; 920 | font-size: 16px; 921 | font-weight: normal; 922 | color: #F61067; 923 | text-decoration: none; 924 | display: inline-block; 925 | padding: 12px 35px 12px 35px; 926 | border: 0px solid transparent; 927 | border-radius: 0; 928 | text-transform: uppercase; } 929 | 930 | table.button:hover table tr td a, 931 | table.button:active table tr td a, 932 | table.button table tr td a:visited, 933 | table.button.tiny:hover table tr td a, 934 | table.button.tiny:active table tr td a, 935 | table.button.tiny table tr td a:visited, 936 | table.button.small:hover table tr td a, 937 | table.button.small:active table tr td a, 938 | table.button.small table tr td a:visited, 939 | table.button.large:hover table tr td a, 940 | table.button.large:active table tr td a, 941 | table.button.large table tr td a:visited { 942 | color: #F61067; } 943 | 944 | table.button.tiny table td, 945 | table.button.tiny table a { 946 | padding: 4px 8px 4px 8px; } 947 | 948 | table.button.tiny table a { 949 | font-size: 10px; 950 | font-weight: normal; } 951 | 952 | table.button.small table td, 953 | table.button.small table a { 954 | padding: 5px 10px 5px 10px; 955 | font-size: 12px; } 956 | 957 | table.button.large table a { 958 | padding: 10px 20px 10px 20px; 959 | font-size: 20px; } 960 | 961 | table.expand, 962 | table.expanded { 963 | width: 100% !important; } 964 | table.expand table, 965 | table.expanded table { 966 | width: 100%; } 967 | table.expand table a, 968 | table.expanded table a { 969 | text-align: center; } 970 | table.expand center, 971 | table.expanded center { 972 | min-width: 0; } 973 | 974 | table.button:hover table td, 975 | table.button:visited table td, 976 | table.button:active table td { 977 | background: transparent; 978 | color: #F61067; } 979 | 980 | table.button:hover table a, 981 | table.button:visited table a, 982 | table.button:active table a { 983 | border: 0px solid transparent; } 984 | 985 | table.button.secondary table td { 986 | background: #777777; 987 | color: #F61067; 988 | border: 2px solid #777777; } 989 | 990 | table.button.secondary table a { 991 | color: #F61067; 992 | border: 0px solid #777777; } 993 | 994 | table.button.secondary:hover table td { 995 | background: #919191; 996 | color: #F61067; } 997 | 998 | table.button.secondary:hover table a { 999 | border: 0px solid #919191; } 1000 | 1001 | table.button.secondary:hover table td a { 1002 | color: #F61067; } 1003 | 1004 | table.button.secondary:active table td a { 1005 | color: #F61067; } 1006 | 1007 | table.button.secondary table td a:visited { 1008 | color: #F61067; } 1009 | 1010 | table.button.success table td { 1011 | background: #3adb76; 1012 | border: 2px solid #3adb76; } 1013 | 1014 | table.button.success table a { 1015 | border: 0px solid #3adb76; } 1016 | 1017 | table.button.success:hover table td { 1018 | background: #23bf5d; } 1019 | 1020 | table.button.success:hover table a { 1021 | border: 0px solid #23bf5d; } 1022 | 1023 | table.button.alert table td { 1024 | background: #ec5840; 1025 | border: 2px solid #ec5840; } 1026 | 1027 | table.button.alert table a { 1028 | border: 0px solid #ec5840; } 1029 | 1030 | table.button.alert:hover table td { 1031 | background: #e23317; } 1032 | 1033 | table.button.alert:hover table a { 1034 | border: 0px solid #e23317; } 1035 | 1036 | table.callout { 1037 | margin-bottom: 16px; 1038 | Margin-bottom: 16px; } 1039 | 1040 | th.callout-inner { 1041 | width: 100%; 1042 | border: 1px solid #cccccc; 1043 | padding: 10px; 1044 | background: #ffffff; } 1045 | th.callout-inner.primary { 1046 | background: #fedbe8; 1047 | border: 1px solid #444444; 1048 | color: #000000; } 1049 | th.callout-inner.secondary { 1050 | background: #ebebeb; 1051 | border: 1px solid #444444; 1052 | color: #000000; } 1053 | th.callout-inner.success { 1054 | background: #e1faea; 1055 | border: 1px solid #1b9448; 1056 | color: #ffffff; } 1057 | th.callout-inner.warning { 1058 | background: #fff3d9; 1059 | border: 1px solid #996800; 1060 | color: #ffffff; } 1061 | th.callout-inner.alert { 1062 | background: #fce6e2; 1063 | border: 1px solid #b42912; 1064 | color: #ffffff; } 1065 | 1066 | .thumbnail { 1067 | border: solid 4px #ffffff; 1068 | box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); 1069 | display: inline-block; 1070 | line-height: 0; 1071 | max-width: 100%; 1072 | transition: box-shadow 200ms ease-out; 1073 | border-radius: 3px; 1074 | margin-bottom: 16px; } 1075 | .thumbnail:hover, .thumbnail:focus { 1076 | box-shadow: 0 0 6px 1px rgba(246, 16, 103, 0.5); } 1077 | 1078 | table.menu { 1079 | width: 580px; } 1080 | table.menu td.menu-item, 1081 | table.menu th.menu-item { 1082 | padding: 10px; 1083 | padding-right: 10px; } 1084 | table.menu td.menu-item a, 1085 | table.menu th.menu-item a { 1086 | color: #F61067; } 1087 | 1088 | table.menu.vertical td.menu-item, 1089 | table.menu.vertical th.menu-item { 1090 | padding: 10px; 1091 | padding-right: 0; 1092 | display: block; } 1093 | table.menu.vertical td.menu-item a, 1094 | table.menu.vertical th.menu-item a { 1095 | width: 100%; } 1096 | 1097 | table.menu.vertical td.menu-item table.menu.vertical td.menu-item, 1098 | table.menu.vertical td.menu-item table.menu.vertical th.menu-item, 1099 | table.menu.vertical th.menu-item table.menu.vertical td.menu-item, 1100 | table.menu.vertical th.menu-item table.menu.vertical th.menu-item { 1101 | padding-left: 10px; } 1102 | 1103 | table.menu.text-center a { 1104 | text-align: center; } 1105 | 1106 | .menu[align="center"] { 1107 | width: auto !important; } 1108 | 1109 | body.outlook p { 1110 | display: inline !important; } 1111 | 1112 | @media only screen and (max-width: 596px) { 1113 | table.body img { 1114 | width: auto !important; 1115 | height: auto !important; } 1116 | table.body center { 1117 | min-width: 0 !important; } 1118 | table.body .container { 1119 | width: 95% !important; } 1120 | table.body .columns, 1121 | table.body .column { 1122 | height: auto !important; 1123 | -moz-box-sizing: border-box; 1124 | -webkit-box-sizing: border-box; 1125 | box-sizing: border-box; 1126 | padding-left: 16px !important; 1127 | padding-right: 16px !important; } 1128 | table.body .columns .column, 1129 | table.body .columns .columns, 1130 | table.body .column .column, 1131 | table.body .column .columns { 1132 | padding-left: 0 !important; 1133 | padding-right: 0 !important; } 1134 | table.body .collapse .columns, 1135 | table.body .collapse .column { 1136 | padding-left: 0 !important; 1137 | padding-right: 0 !important; } 1138 | td.small-1, 1139 | th.small-1 { 1140 | display: inline-block !important; 1141 | width: 8.33333% !important; } 1142 | td.small-2, 1143 | th.small-2 { 1144 | display: inline-block !important; 1145 | width: 16.66667% !important; } 1146 | td.small-3, 1147 | th.small-3 { 1148 | display: inline-block !important; 1149 | width: 25% !important; } 1150 | td.small-4, 1151 | th.small-4 { 1152 | display: inline-block !important; 1153 | width: 33.33333% !important; } 1154 | td.small-5, 1155 | th.small-5 { 1156 | display: inline-block !important; 1157 | width: 41.66667% !important; } 1158 | td.small-6, 1159 | th.small-6 { 1160 | display: inline-block !important; 1161 | width: 50% !important; } 1162 | td.small-7, 1163 | th.small-7 { 1164 | display: inline-block !important; 1165 | width: 58.33333% !important; } 1166 | td.small-8, 1167 | th.small-8 { 1168 | display: inline-block !important; 1169 | width: 66.66667% !important; } 1170 | td.small-9, 1171 | th.small-9 { 1172 | display: inline-block !important; 1173 | width: 75% !important; } 1174 | td.small-10, 1175 | th.small-10 { 1176 | display: inline-block !important; 1177 | width: 83.33333% !important; } 1178 | td.small-11, 1179 | th.small-11 { 1180 | display: inline-block !important; 1181 | width: 91.66667% !important; } 1182 | td.small-12, 1183 | th.small-12 { 1184 | display: inline-block !important; 1185 | width: 100% !important; } 1186 | .columns td.small-12, 1187 | .column td.small-12, 1188 | .columns th.small-12, 1189 | .column th.small-12 { 1190 | display: block !important; 1191 | width: 100% !important; } 1192 | .body .columns td.small-1, 1193 | .body .column td.small-1, 1194 | td.small-1 center, 1195 | .body .columns th.small-1, 1196 | .body .column th.small-1, 1197 | th.small-1 center { 1198 | display: inline-block !important; 1199 | width: 8.33333% !important; } 1200 | .body .columns td.small-2, 1201 | .body .column td.small-2, 1202 | td.small-2 center, 1203 | .body .columns th.small-2, 1204 | .body .column th.small-2, 1205 | th.small-2 center { 1206 | display: inline-block !important; 1207 | width: 16.66667% !important; } 1208 | .body .columns td.small-3, 1209 | .body .column td.small-3, 1210 | td.small-3 center, 1211 | .body .columns th.small-3, 1212 | .body .column th.small-3, 1213 | th.small-3 center { 1214 | display: inline-block !important; 1215 | width: 25% !important; } 1216 | .body .columns td.small-4, 1217 | .body .column td.small-4, 1218 | td.small-4 center, 1219 | .body .columns th.small-4, 1220 | .body .column th.small-4, 1221 | th.small-4 center { 1222 | display: inline-block !important; 1223 | width: 33.33333% !important; } 1224 | .body .columns td.small-5, 1225 | .body .column td.small-5, 1226 | td.small-5 center, 1227 | .body .columns th.small-5, 1228 | .body .column th.small-5, 1229 | th.small-5 center { 1230 | display: inline-block !important; 1231 | width: 41.66667% !important; } 1232 | .body .columns td.small-6, 1233 | .body .column td.small-6, 1234 | td.small-6 center, 1235 | .body .columns th.small-6, 1236 | .body .column th.small-6, 1237 | th.small-6 center { 1238 | display: inline-block !important; 1239 | width: 50% !important; } 1240 | .body .columns td.small-7, 1241 | .body .column td.small-7, 1242 | td.small-7 center, 1243 | .body .columns th.small-7, 1244 | .body .column th.small-7, 1245 | th.small-7 center { 1246 | display: inline-block !important; 1247 | width: 58.33333% !important; } 1248 | .body .columns td.small-8, 1249 | .body .column td.small-8, 1250 | td.small-8 center, 1251 | .body .columns th.small-8, 1252 | .body .column th.small-8, 1253 | th.small-8 center { 1254 | display: inline-block !important; 1255 | width: 66.66667% !important; } 1256 | .body .columns td.small-9, 1257 | .body .column td.small-9, 1258 | td.small-9 center, 1259 | .body .columns th.small-9, 1260 | .body .column th.small-9, 1261 | th.small-9 center { 1262 | display: inline-block !important; 1263 | width: 75% !important; } 1264 | .body .columns td.small-10, 1265 | .body .column td.small-10, 1266 | td.small-10 center, 1267 | .body .columns th.small-10, 1268 | .body .column th.small-10, 1269 | th.small-10 center { 1270 | display: inline-block !important; 1271 | width: 83.33333% !important; } 1272 | .body .columns td.small-11, 1273 | .body .column td.small-11, 1274 | td.small-11 center, 1275 | .body .columns th.small-11, 1276 | .body .column th.small-11, 1277 | th.small-11 center { 1278 | display: inline-block !important; 1279 | width: 91.66667% !important; } 1280 | table.body td.small-offset-1, 1281 | table.body th.small-offset-1 { 1282 | margin-left: 8.33333% !important; 1283 | Margin-left: 8.33333% !important; } 1284 | table.body td.small-offset-2, 1285 | table.body th.small-offset-2 { 1286 | margin-left: 16.66667% !important; 1287 | Margin-left: 16.66667% !important; } 1288 | table.body td.small-offset-3, 1289 | table.body th.small-offset-3 { 1290 | margin-left: 25% !important; 1291 | Margin-left: 25% !important; } 1292 | table.body td.small-offset-4, 1293 | table.body th.small-offset-4 { 1294 | margin-left: 33.33333% !important; 1295 | Margin-left: 33.33333% !important; } 1296 | table.body td.small-offset-5, 1297 | table.body th.small-offset-5 { 1298 | margin-left: 41.66667% !important; 1299 | Margin-left: 41.66667% !important; } 1300 | table.body td.small-offset-6, 1301 | table.body th.small-offset-6 { 1302 | margin-left: 50% !important; 1303 | Margin-left: 50% !important; } 1304 | table.body td.small-offset-7, 1305 | table.body th.small-offset-7 { 1306 | margin-left: 58.33333% !important; 1307 | Margin-left: 58.33333% !important; } 1308 | table.body td.small-offset-8, 1309 | table.body th.small-offset-8 { 1310 | margin-left: 66.66667% !important; 1311 | Margin-left: 66.66667% !important; } 1312 | table.body td.small-offset-9, 1313 | table.body th.small-offset-9 { 1314 | margin-left: 75% !important; 1315 | Margin-left: 75% !important; } 1316 | table.body td.small-offset-10, 1317 | table.body th.small-offset-10 { 1318 | margin-left: 83.33333% !important; 1319 | Margin-left: 83.33333% !important; } 1320 | table.body td.small-offset-11, 1321 | table.body th.small-offset-11 { 1322 | margin-left: 91.66667% !important; 1323 | Margin-left: 91.66667% !important; } 1324 | table.body table.columns td.expander, 1325 | table.body table.columns th.expander { 1326 | display: none !important; } 1327 | table.body .right-text-pad, 1328 | table.body .text-pad-right { 1329 | padding-left: 10px !important; } 1330 | table.body .left-text-pad, 1331 | table.body .text-pad-left { 1332 | padding-right: 10px !important; } 1333 | table.menu { 1334 | width: 100% !important; } 1335 | table.menu td, 1336 | table.menu th { 1337 | width: auto !important; 1338 | display: inline-block !important; } 1339 | table.menu.vertical td, 1340 | table.menu.vertical th, table.menu.small-vertical td, 1341 | table.menu.small-vertical th { 1342 | display: block !important; } 1343 | table.menu[align="center"] { 1344 | width: auto !important; } 1345 | table.button.expand { 1346 | width: 100% !important; } } 1347 | 1348 | .footer-drip { 1349 | background: #F3F3F3; 1350 | border-radius: 0 0 10px 10px; } 1351 | 1352 | .footer-drip .columns { 1353 | padding-top: 16px; } 1354 | 1355 | .container.header-drip { 1356 | background: #F3F3F3; } 1357 | 1358 | .container.header-drip .columns { 1359 | padding-bottom: 16px; 1360 | padding-top: 16px; } 1361 | 1362 | .container.body-drip { 1363 | border-radius: 10px; 1364 | border-top: 10px solid #663399; } 1365 | 1366 | .header { 1367 | background: #8a8a8a; } 1368 | 1369 | .header p { 1370 | color: #ffffff; 1371 | margin: 0; } 1372 | 1373 | .header .columns { 1374 | padding-bottom: 0; } 1375 | 1376 | .header .container { 1377 | background: #8a8a8a; 1378 | padding-top: 16px; 1379 | padding-bottom: 16px; } 1380 | 1381 | .header .container td { 1382 | padding-top: 16px; 1383 | padding-bottom: 16px; } 1384 | 1385 | .no-bg { 1386 | background: transparent !important; } 1387 | 1388 | .custom-pb { 1389 | padding-bottom: 10px !important; } 1390 | 1391 | .tiny-text { 1392 | font-size: 12px; } 1393 | 1394 | .text-uppercase { 1395 | text-transform: uppercase; } 1396 | 1397 | .basic-link { 1398 | text-decoration: underline; 1399 | color: #000; } 1400 | 1401 | .main-sub-heading { 1402 | color: #666666; 1403 | text-transform: uppercase; 1404 | margin: 0; 1405 | font-size: 20px; } 1406 | 1407 | .main-heading { 1408 | text-transform: uppercase; 1409 | margin: 0; 1410 | font-size: 22px; } 1411 | 1412 | .main-body-p { 1413 | color: #666666; 1414 | line-height: 1.57143; } 1415 | 1416 | .decorative-line { 1417 | background: #666666; 1418 | height: 2px; } 1419 | 1420 | .item-name { 1421 | text-transform: uppercase; 1422 | color: #F61067; } 1423 | 1424 | .item-price { 1425 | color: #666666; } 1426 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | #outlook a { 2 | padding: 0; } 3 | 4 | body { 5 | width: 100% !important; 6 | min-width: 100%; 7 | -webkit-text-size-adjust: 100%; 8 | -ms-text-size-adjust: 100%; 9 | margin: 0; 10 | Margin: 0; 11 | padding: 0; 12 | -moz-box-sizing: border-box; 13 | -webkit-box-sizing: border-box; 14 | box-sizing: border-box; } 15 | 16 | .ExternalClass { 17 | width: 100%; } 18 | .ExternalClass, 19 | .ExternalClass p, 20 | .ExternalClass span, 21 | .ExternalClass font, 22 | .ExternalClass td, 23 | .ExternalClass div { 24 | line-height: 100%; } 25 | 26 | #backgroundTable { 27 | margin: 0; 28 | Margin: 0; 29 | padding: 0; 30 | width: 100% !important; 31 | line-height: 100% !important; } 32 | 33 | img { 34 | outline: none; 35 | text-decoration: none; 36 | -ms-interpolation-mode: bicubic; 37 | width: auto; 38 | max-width: 100%; 39 | clear: both; 40 | display: block; } 41 | 42 | center { 43 | width: 100%; 44 | min-width: 580px; } 45 | 46 | a img { 47 | border: none; } 48 | 49 | p { 50 | margin: 0 0 0 10px; 51 | Margin: 0 0 0 10px; } 52 | 53 | table { 54 | border-spacing: 0; 55 | border-collapse: collapse; } 56 | 57 | td { 58 | word-wrap: break-word; 59 | -webkit-hyphens: auto; 60 | -moz-hyphens: auto; 61 | hyphens: auto; 62 | border-collapse: collapse !important; } 63 | 64 | table, tr, td { 65 | padding: 0; 66 | vertical-align: top; 67 | text-align: left; } 68 | 69 | html { 70 | min-height: 100%; 71 | background: #FBF18E; } 72 | 73 | table.body { 74 | background: #FBF18E; 75 | height: 100%; 76 | width: 100%; } 77 | 78 | table.container { 79 | background: #ffffff; 80 | width: 580px; 81 | margin: 0 auto; 82 | Margin: 0 auto; 83 | text-align: inherit; } 84 | 85 | table.row { 86 | padding: 0; 87 | width: 100%; 88 | position: relative; } 89 | 90 | table.container table.row { 91 | display: table; } 92 | 93 | td.columns, 94 | td.column, 95 | th.columns, 96 | th.column { 97 | margin: 0 auto; 98 | Margin: 0 auto; 99 | padding-left: 16px; 100 | padding-bottom: 16px; } 101 | 102 | td.columns.last, 103 | td.column.last, 104 | th.columns.last, 105 | th.column.last { 106 | padding-right: 16px; } 107 | 108 | td.columns table, 109 | td.column table, 110 | th.columns table, 111 | th.column table { 112 | width: 100%; } 113 | 114 | td.large-1, 115 | th.large-1 { 116 | width: 32.33333px; 117 | padding-left: 8px; 118 | padding-right: 8px; } 119 | 120 | td.large-1.first, 121 | th.large-1.first { 122 | padding-left: 16px; } 123 | 124 | td.large-1.last, 125 | th.large-1.last { 126 | padding-right: 16px; } 127 | 128 | .collapse > tbody > tr > td.large-1, 129 | .collapse > tbody > tr > th.large-1 { 130 | padding-right: 0; 131 | padding-left: 0; 132 | width: 48.33333px; } 133 | 134 | .collapse td.large-1.first, 135 | .collapse th.large-1.first, 136 | .collapse td.large-1.last, 137 | .collapse th.large-1.last { 138 | width: 56.33333px; } 139 | 140 | td.large-2, 141 | th.large-2 { 142 | width: 80.66667px; 143 | padding-left: 8px; 144 | padding-right: 8px; } 145 | 146 | td.large-2.first, 147 | th.large-2.first { 148 | padding-left: 16px; } 149 | 150 | td.large-2.last, 151 | th.large-2.last { 152 | padding-right: 16px; } 153 | 154 | .collapse > tbody > tr > td.large-2, 155 | .collapse > tbody > tr > th.large-2 { 156 | padding-right: 0; 157 | padding-left: 0; 158 | width: 96.66667px; } 159 | 160 | .collapse td.large-2.first, 161 | .collapse th.large-2.first, 162 | .collapse td.large-2.last, 163 | .collapse th.large-2.last { 164 | width: 104.66667px; } 165 | 166 | td.large-3, 167 | th.large-3 { 168 | width: 129px; 169 | padding-left: 8px; 170 | padding-right: 8px; } 171 | 172 | td.large-3.first, 173 | th.large-3.first { 174 | padding-left: 16px; } 175 | 176 | td.large-3.last, 177 | th.large-3.last { 178 | padding-right: 16px; } 179 | 180 | .collapse > tbody > tr > td.large-3, 181 | .collapse > tbody > tr > th.large-3 { 182 | padding-right: 0; 183 | padding-left: 0; 184 | width: 145px; } 185 | 186 | .collapse td.large-3.first, 187 | .collapse th.large-3.first, 188 | .collapse td.large-3.last, 189 | .collapse th.large-3.last { 190 | width: 153px; } 191 | 192 | td.large-4, 193 | th.large-4 { 194 | width: 177.33333px; 195 | padding-left: 8px; 196 | padding-right: 8px; } 197 | 198 | td.large-4.first, 199 | th.large-4.first { 200 | padding-left: 16px; } 201 | 202 | td.large-4.last, 203 | th.large-4.last { 204 | padding-right: 16px; } 205 | 206 | .collapse > tbody > tr > td.large-4, 207 | .collapse > tbody > tr > th.large-4 { 208 | padding-right: 0; 209 | padding-left: 0; 210 | width: 193.33333px; } 211 | 212 | .collapse td.large-4.first, 213 | .collapse th.large-4.first, 214 | .collapse td.large-4.last, 215 | .collapse th.large-4.last { 216 | width: 201.33333px; } 217 | 218 | td.large-5, 219 | th.large-5 { 220 | width: 225.66667px; 221 | padding-left: 8px; 222 | padding-right: 8px; } 223 | 224 | td.large-5.first, 225 | th.large-5.first { 226 | padding-left: 16px; } 227 | 228 | td.large-5.last, 229 | th.large-5.last { 230 | padding-right: 16px; } 231 | 232 | .collapse > tbody > tr > td.large-5, 233 | .collapse > tbody > tr > th.large-5 { 234 | padding-right: 0; 235 | padding-left: 0; 236 | width: 241.66667px; } 237 | 238 | .collapse td.large-5.first, 239 | .collapse th.large-5.first, 240 | .collapse td.large-5.last, 241 | .collapse th.large-5.last { 242 | width: 249.66667px; } 243 | 244 | td.large-6, 245 | th.large-6 { 246 | width: 274px; 247 | padding-left: 8px; 248 | padding-right: 8px; } 249 | 250 | td.large-6.first, 251 | th.large-6.first { 252 | padding-left: 16px; } 253 | 254 | td.large-6.last, 255 | th.large-6.last { 256 | padding-right: 16px; } 257 | 258 | .collapse > tbody > tr > td.large-6, 259 | .collapse > tbody > tr > th.large-6 { 260 | padding-right: 0; 261 | padding-left: 0; 262 | width: 290px; } 263 | 264 | .collapse td.large-6.first, 265 | .collapse th.large-6.first, 266 | .collapse td.large-6.last, 267 | .collapse th.large-6.last { 268 | width: 298px; } 269 | 270 | td.large-7, 271 | th.large-7 { 272 | width: 322.33333px; 273 | padding-left: 8px; 274 | padding-right: 8px; } 275 | 276 | td.large-7.first, 277 | th.large-7.first { 278 | padding-left: 16px; } 279 | 280 | td.large-7.last, 281 | th.large-7.last { 282 | padding-right: 16px; } 283 | 284 | .collapse > tbody > tr > td.large-7, 285 | .collapse > tbody > tr > th.large-7 { 286 | padding-right: 0; 287 | padding-left: 0; 288 | width: 338.33333px; } 289 | 290 | .collapse td.large-7.first, 291 | .collapse th.large-7.first, 292 | .collapse td.large-7.last, 293 | .collapse th.large-7.last { 294 | width: 346.33333px; } 295 | 296 | td.large-8, 297 | th.large-8 { 298 | width: 370.66667px; 299 | padding-left: 8px; 300 | padding-right: 8px; } 301 | 302 | td.large-8.first, 303 | th.large-8.first { 304 | padding-left: 16px; } 305 | 306 | td.large-8.last, 307 | th.large-8.last { 308 | padding-right: 16px; } 309 | 310 | .collapse > tbody > tr > td.large-8, 311 | .collapse > tbody > tr > th.large-8 { 312 | padding-right: 0; 313 | padding-left: 0; 314 | width: 386.66667px; } 315 | 316 | .collapse td.large-8.first, 317 | .collapse th.large-8.first, 318 | .collapse td.large-8.last, 319 | .collapse th.large-8.last { 320 | width: 394.66667px; } 321 | 322 | td.large-9, 323 | th.large-9 { 324 | width: 419px; 325 | padding-left: 8px; 326 | padding-right: 8px; } 327 | 328 | td.large-9.first, 329 | th.large-9.first { 330 | padding-left: 16px; } 331 | 332 | td.large-9.last, 333 | th.large-9.last { 334 | padding-right: 16px; } 335 | 336 | .collapse > tbody > tr > td.large-9, 337 | .collapse > tbody > tr > th.large-9 { 338 | padding-right: 0; 339 | padding-left: 0; 340 | width: 435px; } 341 | 342 | .collapse td.large-9.first, 343 | .collapse th.large-9.first, 344 | .collapse td.large-9.last, 345 | .collapse th.large-9.last { 346 | width: 443px; } 347 | 348 | td.large-10, 349 | th.large-10 { 350 | width: 467.33333px; 351 | padding-left: 8px; 352 | padding-right: 8px; } 353 | 354 | td.large-10.first, 355 | th.large-10.first { 356 | padding-left: 16px; } 357 | 358 | td.large-10.last, 359 | th.large-10.last { 360 | padding-right: 16px; } 361 | 362 | .collapse > tbody > tr > td.large-10, 363 | .collapse > tbody > tr > th.large-10 { 364 | padding-right: 0; 365 | padding-left: 0; 366 | width: 483.33333px; } 367 | 368 | .collapse td.large-10.first, 369 | .collapse th.large-10.first, 370 | .collapse td.large-10.last, 371 | .collapse th.large-10.last { 372 | width: 491.33333px; } 373 | 374 | td.large-11, 375 | th.large-11 { 376 | width: 515.66667px; 377 | padding-left: 8px; 378 | padding-right: 8px; } 379 | 380 | td.large-11.first, 381 | th.large-11.first { 382 | padding-left: 16px; } 383 | 384 | td.large-11.last, 385 | th.large-11.last { 386 | padding-right: 16px; } 387 | 388 | .collapse > tbody > tr > td.large-11, 389 | .collapse > tbody > tr > th.large-11 { 390 | padding-right: 0; 391 | padding-left: 0; 392 | width: 531.66667px; } 393 | 394 | .collapse td.large-11.first, 395 | .collapse th.large-11.first, 396 | .collapse td.large-11.last, 397 | .collapse th.large-11.last { 398 | width: 539.66667px; } 399 | 400 | td.large-12, 401 | th.large-12 { 402 | width: 564px; 403 | padding-left: 8px; 404 | padding-right: 8px; } 405 | 406 | td.large-12.first, 407 | th.large-12.first { 408 | padding-left: 16px; } 409 | 410 | td.large-12.last, 411 | th.large-12.last { 412 | padding-right: 16px; } 413 | 414 | .collapse > tbody > tr > td.large-12, 415 | .collapse > tbody > tr > th.large-12 { 416 | padding-right: 0; 417 | padding-left: 0; 418 | width: 580px; } 419 | 420 | .collapse td.large-12.first, 421 | .collapse th.large-12.first, 422 | .collapse td.large-12.last, 423 | .collapse th.large-12.last { 424 | width: 588px; } 425 | 426 | td.large-1 center, 427 | th.large-1 center { 428 | min-width: 0.33333px; } 429 | 430 | td.large-2 center, 431 | th.large-2 center { 432 | min-width: 48.66667px; } 433 | 434 | td.large-3 center, 435 | th.large-3 center { 436 | min-width: 97px; } 437 | 438 | td.large-4 center, 439 | th.large-4 center { 440 | min-width: 145.33333px; } 441 | 442 | td.large-5 center, 443 | th.large-5 center { 444 | min-width: 193.66667px; } 445 | 446 | td.large-6 center, 447 | th.large-6 center { 448 | min-width: 242px; } 449 | 450 | td.large-7 center, 451 | th.large-7 center { 452 | min-width: 290.33333px; } 453 | 454 | td.large-8 center, 455 | th.large-8 center { 456 | min-width: 338.66667px; } 457 | 458 | td.large-9 center, 459 | th.large-9 center { 460 | min-width: 387px; } 461 | 462 | td.large-10 center, 463 | th.large-10 center { 464 | min-width: 435.33333px; } 465 | 466 | td.large-11 center, 467 | th.large-11 center { 468 | min-width: 483.66667px; } 469 | 470 | td.large-12 center, 471 | th.large-12 center { 472 | min-width: 532px; } 473 | 474 | .body .columns td.large-1, 475 | .body .column td.large-1, 476 | .body .columns th.large-1, 477 | .body .column th.large-1 { 478 | width: 8.33333%; } 479 | 480 | .body .columns td.large-2, 481 | .body .column td.large-2, 482 | .body .columns th.large-2, 483 | .body .column th.large-2 { 484 | width: 16.66667%; } 485 | 486 | .body .columns td.large-3, 487 | .body .column td.large-3, 488 | .body .columns th.large-3, 489 | .body .column th.large-3 { 490 | width: 25%; } 491 | 492 | .body .columns td.large-4, 493 | .body .column td.large-4, 494 | .body .columns th.large-4, 495 | .body .column th.large-4 { 496 | width: 33.33333%; } 497 | 498 | .body .columns td.large-5, 499 | .body .column td.large-5, 500 | .body .columns th.large-5, 501 | .body .column th.large-5 { 502 | width: 41.66667%; } 503 | 504 | .body .columns td.large-6, 505 | .body .column td.large-6, 506 | .body .columns th.large-6, 507 | .body .column th.large-6 { 508 | width: 50%; } 509 | 510 | .body .columns td.large-7, 511 | .body .column td.large-7, 512 | .body .columns th.large-7, 513 | .body .column th.large-7 { 514 | width: 58.33333%; } 515 | 516 | .body .columns td.large-8, 517 | .body .column td.large-8, 518 | .body .columns th.large-8, 519 | .body .column th.large-8 { 520 | width: 66.66667%; } 521 | 522 | .body .columns td.large-9, 523 | .body .column td.large-9, 524 | .body .columns th.large-9, 525 | .body .column th.large-9 { 526 | width: 75%; } 527 | 528 | .body .columns td.large-10, 529 | .body .column td.large-10, 530 | .body .columns th.large-10, 531 | .body .column th.large-10 { 532 | width: 83.33333%; } 533 | 534 | .body .columns td.large-11, 535 | .body .column td.large-11, 536 | .body .columns th.large-11, 537 | .body .column th.large-11 { 538 | width: 91.66667%; } 539 | 540 | .body .columns td.large-12, 541 | .body .column td.large-12, 542 | .body .columns th.large-12, 543 | .body .column th.large-12 { 544 | width: 100%; } 545 | 546 | td.large-offset-1, 547 | td.large-offset-1.first, 548 | td.large-offset-1.last, 549 | th.large-offset-1, 550 | th.large-offset-1.first, 551 | th.large-offset-1.last { 552 | padding-left: 64.33333px; } 553 | 554 | td.large-offset-2, 555 | td.large-offset-2.first, 556 | td.large-offset-2.last, 557 | th.large-offset-2, 558 | th.large-offset-2.first, 559 | th.large-offset-2.last { 560 | padding-left: 112.66667px; } 561 | 562 | td.large-offset-3, 563 | td.large-offset-3.first, 564 | td.large-offset-3.last, 565 | th.large-offset-3, 566 | th.large-offset-3.first, 567 | th.large-offset-3.last { 568 | padding-left: 161px; } 569 | 570 | td.large-offset-4, 571 | td.large-offset-4.first, 572 | td.large-offset-4.last, 573 | th.large-offset-4, 574 | th.large-offset-4.first, 575 | th.large-offset-4.last { 576 | padding-left: 209.33333px; } 577 | 578 | td.large-offset-5, 579 | td.large-offset-5.first, 580 | td.large-offset-5.last, 581 | th.large-offset-5, 582 | th.large-offset-5.first, 583 | th.large-offset-5.last { 584 | padding-left: 257.66667px; } 585 | 586 | td.large-offset-6, 587 | td.large-offset-6.first, 588 | td.large-offset-6.last, 589 | th.large-offset-6, 590 | th.large-offset-6.first, 591 | th.large-offset-6.last { 592 | padding-left: 306px; } 593 | 594 | td.large-offset-7, 595 | td.large-offset-7.first, 596 | td.large-offset-7.last, 597 | th.large-offset-7, 598 | th.large-offset-7.first, 599 | th.large-offset-7.last { 600 | padding-left: 354.33333px; } 601 | 602 | td.large-offset-8, 603 | td.large-offset-8.first, 604 | td.large-offset-8.last, 605 | th.large-offset-8, 606 | th.large-offset-8.first, 607 | th.large-offset-8.last { 608 | padding-left: 402.66667px; } 609 | 610 | td.large-offset-9, 611 | td.large-offset-9.first, 612 | td.large-offset-9.last, 613 | th.large-offset-9, 614 | th.large-offset-9.first, 615 | th.large-offset-9.last { 616 | padding-left: 451px; } 617 | 618 | td.large-offset-10, 619 | td.large-offset-10.first, 620 | td.large-offset-10.last, 621 | th.large-offset-10, 622 | th.large-offset-10.first, 623 | th.large-offset-10.last { 624 | padding-left: 499.33333px; } 625 | 626 | td.large-offset-11, 627 | td.large-offset-11.first, 628 | td.large-offset-11.last, 629 | th.large-offset-11, 630 | th.large-offset-11.first, 631 | th.large-offset-11.last { 632 | padding-left: 547.66667px; } 633 | 634 | td.expander, 635 | th.expander { 636 | visibility: hidden; 637 | width: 0; 638 | padding: 0 !important; } 639 | 640 | .block-grid { 641 | width: 100%; 642 | max-width: 580px; } 643 | .block-grid td { 644 | display: inline-block; 645 | padding: 8px; } 646 | 647 | .up-2 td { 648 | width: 274px !important; } 649 | 650 | .up-3 td { 651 | width: 177px !important; } 652 | 653 | .up-4 td { 654 | width: 129px !important; } 655 | 656 | .up-5 td { 657 | width: 100px !important; } 658 | 659 | .up-6 td { 660 | width: 80px !important; } 661 | 662 | .up-7 td { 663 | width: 66px !important; } 664 | 665 | .up-8 td { 666 | width: 56px !important; } 667 | 668 | table.text-center, 669 | td.text-center, 670 | h1.text-center, 671 | h2.text-center, 672 | h3.text-center, 673 | h4.text-center, 674 | h5.text-center, 675 | h6.text-center, 676 | p.text-center, 677 | span.text-center { 678 | text-align: center; } 679 | 680 | h1.text-left, 681 | h2.text-left, 682 | h3.text-left, 683 | h4.text-left, 684 | h5.text-left, 685 | h6.text-left, 686 | p.text-left, 687 | span.text-left { 688 | text-align: left; } 689 | 690 | h1.text-right, 691 | h2.text-right, 692 | h3.text-right, 693 | h4.text-right, 694 | h5.text-right, 695 | h6.text-right, 696 | p.text-right, 697 | span.text-right { 698 | text-align: right; } 699 | 700 | span.text-center { 701 | display: block; 702 | width: 100%; 703 | text-align: center; } 704 | 705 | @media only screen and (max-width: 596px) { 706 | .small-float-center { 707 | margin: 0 auto !important; 708 | float: none !important; 709 | text-align: center !important; } 710 | .small-text-center { 711 | text-align: center !important; } 712 | .small-text-left { 713 | text-align: left !important; } 714 | .small-text-right { 715 | text-align: right !important; } } 716 | 717 | img.float-left { 718 | float: left; 719 | text-align: left; } 720 | 721 | img.float-right { 722 | float: right; 723 | text-align: right; } 724 | 725 | img.float-center, 726 | img.text-center { 727 | margin: 0 auto; 728 | Margin: 0 auto; 729 | float: none; 730 | text-align: center; } 731 | 732 | table.float-center, 733 | td.float-center, 734 | th.float-center { 735 | margin: 0 auto; 736 | Margin: 0 auto; 737 | float: none; 738 | text-align: center; } 739 | 740 | table.body table.container .hide-for-large { 741 | display: none; 742 | width: 0; 743 | mso-hide: all; 744 | overflow: hidden; 745 | max-height: 0px; 746 | font-size: 0; 747 | width: 0px; 748 | line-height: 0; } 749 | @media only screen and (max-width: 596px) { 750 | table.body table.container .hide-for-large { 751 | display: block !important; 752 | width: auto !important; 753 | overflow: visible !important; } } 754 | 755 | table.body table.container .hide-for-large * { 756 | mso-hide: all; } 757 | 758 | @media only screen and (max-width: 596px) { 759 | table.body table.container .row.hide-for-large, 760 | table.body table.container .row.hide-for-large { 761 | display: table !important; 762 | width: 100% !important; } } 763 | 764 | @media only screen and (max-width: 596px) { 765 | table.body table.container .show-for-large { 766 | display: none !important; 767 | width: 0; 768 | mso-hide: all; 769 | overflow: hidden; } } 770 | 771 | body, 772 | table.body, 773 | h1, 774 | h2, 775 | h3, 776 | h4, 777 | h5, 778 | h6, 779 | p, 780 | td, 781 | th, 782 | a { 783 | color: #000000; 784 | font-family: Arial, sans-serif; 785 | font-weight: normal; 786 | padding: 0; 787 | margin: 0; 788 | Margin: 0; 789 | text-align: left; 790 | line-height: 1.3; } 791 | 792 | h1, 793 | h2, 794 | h3, 795 | h4, 796 | h5, 797 | h6 { 798 | color: inherit; 799 | word-wrap: normal; 800 | font-family: Arial, sans-serif; 801 | font-weight: bold; 802 | margin-bottom: 0; 803 | Margin-bottom: 0; } 804 | 805 | h1 { 806 | font-size: 22px; } 807 | 808 | h2 { 809 | font-size: 16px; } 810 | 811 | h3 { 812 | font-size: 14px; } 813 | 814 | h4 { 815 | font-size: 24px; } 816 | 817 | h5 { 818 | font-size: 20px; } 819 | 820 | h6 { 821 | font-size: 18px; } 822 | 823 | body, 824 | table.body, 825 | p, 826 | td, 827 | th { 828 | font-size: 14px; 829 | line-height: 19px; } 830 | 831 | p { 832 | margin-bottom: 10px; 833 | Margin-bottom: 10px; } 834 | p.lead { 835 | font-size: 17.5px; 836 | line-height: 1.6; } 837 | p.subheader { 838 | margin-top: 4px; 839 | margin-bottom: 8px; 840 | Margin-top: 4px; 841 | Margin-bottom: 8px; 842 | font-weight: normal; 843 | line-height: 1.4; 844 | color: #8a8a8a; } 845 | 846 | small { 847 | font-size: 80%; 848 | color: #cacaca; } 849 | 850 | a { 851 | color: #F61067; 852 | text-decoration: none; } 853 | a:hover { 854 | color: #cb0852; } 855 | a:active { 856 | color: #cb0852; } 857 | a:visited { 858 | color: #F61067; } 859 | 860 | h1 a, 861 | h1 a:visited, 862 | h2 a, 863 | h2 a:visited, 864 | h3 a, 865 | h3 a:visited, 866 | h4 a, 867 | h4 a:visited, 868 | h5 a, 869 | h5 a:visited, 870 | h6 a, 871 | h6 a:visited { 872 | color: #F61067; } 873 | 874 | pre { 875 | background: #f3f3f3; 876 | margin: 30px 0; 877 | Margin: 30px 0; } 878 | pre code { 879 | color: #cacaca; } 880 | pre code span.callout { 881 | color: #8a8a8a; 882 | font-weight: bold; } 883 | pre code span.callout-strong { 884 | color: #ff6908; 885 | font-weight: bold; } 886 | 887 | hr { 888 | max-width: 580px; 889 | height: 0; 890 | border-right: 0; 891 | border-top: 0; 892 | border-bottom: 1px solid #cacaca; 893 | border-left: 0; 894 | margin: 20px auto; 895 | Margin: 20px auto; 896 | clear: both; } 897 | 898 | .stat { 899 | font-size: 40px; 900 | line-height: 1; } 901 | p + .stat { 902 | margin-top: -16px; 903 | Margin-top: -16px; } 904 | 905 | table.button { 906 | width: auto !important; 907 | margin: 0 0 16px 0; 908 | Margin: 0 0 16px 0; } 909 | table.button table td { 910 | text-align: left; 911 | color: #F61067; 912 | background: transparent; 913 | border: 2px solid #F61067; } 914 | table.button table td.radius { 915 | border-radius: 0; } 916 | table.button table td.rounded { 917 | border-radius: 500px; } 918 | table.button table td a { 919 | font-family: Arial, sans-serif; 920 | font-size: 16px; 921 | font-weight: normal; 922 | color: #F61067; 923 | text-decoration: none; 924 | display: inline-block; 925 | padding: 12px 35px 12px 35px; 926 | border: 0px solid transparent; 927 | border-radius: 0; 928 | text-transform: uppercase; } 929 | 930 | table.button:hover table tr td a, 931 | table.button:active table tr td a, 932 | table.button table tr td a:visited, 933 | table.button.tiny:hover table tr td a, 934 | table.button.tiny:active table tr td a, 935 | table.button.tiny table tr td a:visited, 936 | table.button.small:hover table tr td a, 937 | table.button.small:active table tr td a, 938 | table.button.small table tr td a:visited, 939 | table.button.large:hover table tr td a, 940 | table.button.large:active table tr td a, 941 | table.button.large table tr td a:visited { 942 | color: #F61067; } 943 | 944 | table.button.tiny table td, 945 | table.button.tiny table a { 946 | padding: 4px 8px 4px 8px; } 947 | 948 | table.button.tiny table a { 949 | font-size: 10px; 950 | font-weight: normal; } 951 | 952 | table.button.small table td, 953 | table.button.small table a { 954 | padding: 5px 10px 5px 10px; 955 | font-size: 12px; } 956 | 957 | table.button.large table a { 958 | padding: 10px 20px 10px 20px; 959 | font-size: 20px; } 960 | 961 | table.expand, 962 | table.expanded { 963 | width: 100% !important; } 964 | table.expand table, 965 | table.expanded table { 966 | width: 100%; } 967 | table.expand table a, 968 | table.expanded table a { 969 | text-align: center; } 970 | table.expand center, 971 | table.expanded center { 972 | min-width: 0; } 973 | 974 | table.button:hover table td, 975 | table.button:visited table td, 976 | table.button:active table td { 977 | background: transparent; 978 | color: #F61067; } 979 | 980 | table.button:hover table a, 981 | table.button:visited table a, 982 | table.button:active table a { 983 | border: 0px solid transparent; } 984 | 985 | table.button.secondary table td { 986 | background: #777777; 987 | color: #F61067; 988 | border: 2px solid #777777; } 989 | 990 | table.button.secondary table a { 991 | color: #F61067; 992 | border: 0px solid #777777; } 993 | 994 | table.button.secondary:hover table td { 995 | background: #919191; 996 | color: #F61067; } 997 | 998 | table.button.secondary:hover table a { 999 | border: 0px solid #919191; } 1000 | 1001 | table.button.secondary:hover table td a { 1002 | color: #F61067; } 1003 | 1004 | table.button.secondary:active table td a { 1005 | color: #F61067; } 1006 | 1007 | table.button.secondary table td a:visited { 1008 | color: #F61067; } 1009 | 1010 | table.button.success table td { 1011 | background: #3adb76; 1012 | border: 2px solid #3adb76; } 1013 | 1014 | table.button.success table a { 1015 | border: 0px solid #3adb76; } 1016 | 1017 | table.button.success:hover table td { 1018 | background: #23bf5d; } 1019 | 1020 | table.button.success:hover table a { 1021 | border: 0px solid #23bf5d; } 1022 | 1023 | table.button.alert table td { 1024 | background: #ec5840; 1025 | border: 2px solid #ec5840; } 1026 | 1027 | table.button.alert table a { 1028 | border: 0px solid #ec5840; } 1029 | 1030 | table.button.alert:hover table td { 1031 | background: #e23317; } 1032 | 1033 | table.button.alert:hover table a { 1034 | border: 0px solid #e23317; } 1035 | 1036 | table.callout { 1037 | margin-bottom: 16px; 1038 | Margin-bottom: 16px; } 1039 | 1040 | th.callout-inner { 1041 | width: 100%; 1042 | border: 1px solid #cccccc; 1043 | padding: 10px; 1044 | background: #ffffff; } 1045 | th.callout-inner.primary { 1046 | background: #fedbe8; 1047 | border: 1px solid #444444; 1048 | color: #000000; } 1049 | th.callout-inner.secondary { 1050 | background: #ebebeb; 1051 | border: 1px solid #444444; 1052 | color: #000000; } 1053 | th.callout-inner.success { 1054 | background: #e1faea; 1055 | border: 1px solid #1b9448; 1056 | color: #ffffff; } 1057 | th.callout-inner.warning { 1058 | background: #fff3d9; 1059 | border: 1px solid #996800; 1060 | color: #ffffff; } 1061 | th.callout-inner.alert { 1062 | background: #fce6e2; 1063 | border: 1px solid #b42912; 1064 | color: #ffffff; } 1065 | 1066 | .thumbnail { 1067 | border: solid 4px #ffffff; 1068 | box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); 1069 | display: inline-block; 1070 | line-height: 0; 1071 | max-width: 100%; 1072 | transition: box-shadow 200ms ease-out; 1073 | border-radius: 3px; 1074 | margin-bottom: 16px; } 1075 | .thumbnail:hover, .thumbnail:focus { 1076 | box-shadow: 0 0 6px 1px rgba(246, 16, 103, 0.5); } 1077 | 1078 | table.menu { 1079 | width: 580px; } 1080 | table.menu td.menu-item, 1081 | table.menu th.menu-item { 1082 | padding: 10px; 1083 | padding-right: 10px; } 1084 | table.menu td.menu-item a, 1085 | table.menu th.menu-item a { 1086 | color: #F61067; } 1087 | 1088 | table.menu.vertical td.menu-item, 1089 | table.menu.vertical th.menu-item { 1090 | padding: 10px; 1091 | padding-right: 0; 1092 | display: block; } 1093 | table.menu.vertical td.menu-item a, 1094 | table.menu.vertical th.menu-item a { 1095 | width: 100%; } 1096 | 1097 | table.menu.vertical td.menu-item table.menu.vertical td.menu-item, 1098 | table.menu.vertical td.menu-item table.menu.vertical th.menu-item, 1099 | table.menu.vertical th.menu-item table.menu.vertical td.menu-item, 1100 | table.menu.vertical th.menu-item table.menu.vertical th.menu-item { 1101 | padding-left: 10px; } 1102 | 1103 | table.menu.text-center a { 1104 | text-align: center; } 1105 | 1106 | .menu[align="center"] { 1107 | width: auto !important; } 1108 | 1109 | body.outlook p { 1110 | display: inline !important; } 1111 | 1112 | @media only screen and (max-width: 596px) { 1113 | table.body img { 1114 | width: auto !important; 1115 | height: auto !important; } 1116 | table.body center { 1117 | min-width: 0 !important; } 1118 | table.body .container { 1119 | width: 95% !important; } 1120 | table.body .columns, 1121 | table.body .column { 1122 | height: auto !important; 1123 | -moz-box-sizing: border-box; 1124 | -webkit-box-sizing: border-box; 1125 | box-sizing: border-box; 1126 | padding-left: 16px !important; 1127 | padding-right: 16px !important; } 1128 | table.body .columns .column, 1129 | table.body .columns .columns, 1130 | table.body .column .column, 1131 | table.body .column .columns { 1132 | padding-left: 0 !important; 1133 | padding-right: 0 !important; } 1134 | table.body .collapse .columns, 1135 | table.body .collapse .column { 1136 | padding-left: 0 !important; 1137 | padding-right: 0 !important; } 1138 | td.small-1, 1139 | th.small-1 { 1140 | display: inline-block !important; 1141 | width: 8.33333% !important; } 1142 | td.small-2, 1143 | th.small-2 { 1144 | display: inline-block !important; 1145 | width: 16.66667% !important; } 1146 | td.small-3, 1147 | th.small-3 { 1148 | display: inline-block !important; 1149 | width: 25% !important; } 1150 | td.small-4, 1151 | th.small-4 { 1152 | display: inline-block !important; 1153 | width: 33.33333% !important; } 1154 | td.small-5, 1155 | th.small-5 { 1156 | display: inline-block !important; 1157 | width: 41.66667% !important; } 1158 | td.small-6, 1159 | th.small-6 { 1160 | display: inline-block !important; 1161 | width: 50% !important; } 1162 | td.small-7, 1163 | th.small-7 { 1164 | display: inline-block !important; 1165 | width: 58.33333% !important; } 1166 | td.small-8, 1167 | th.small-8 { 1168 | display: inline-block !important; 1169 | width: 66.66667% !important; } 1170 | td.small-9, 1171 | th.small-9 { 1172 | display: inline-block !important; 1173 | width: 75% !important; } 1174 | td.small-10, 1175 | th.small-10 { 1176 | display: inline-block !important; 1177 | width: 83.33333% !important; } 1178 | td.small-11, 1179 | th.small-11 { 1180 | display: inline-block !important; 1181 | width: 91.66667% !important; } 1182 | td.small-12, 1183 | th.small-12 { 1184 | display: inline-block !important; 1185 | width: 100% !important; } 1186 | .columns td.small-12, 1187 | .column td.small-12, 1188 | .columns th.small-12, 1189 | .column th.small-12 { 1190 | display: block !important; 1191 | width: 100% !important; } 1192 | .body .columns td.small-1, 1193 | .body .column td.small-1, 1194 | td.small-1 center, 1195 | .body .columns th.small-1, 1196 | .body .column th.small-1, 1197 | th.small-1 center { 1198 | display: inline-block !important; 1199 | width: 8.33333% !important; } 1200 | .body .columns td.small-2, 1201 | .body .column td.small-2, 1202 | td.small-2 center, 1203 | .body .columns th.small-2, 1204 | .body .column th.small-2, 1205 | th.small-2 center { 1206 | display: inline-block !important; 1207 | width: 16.66667% !important; } 1208 | .body .columns td.small-3, 1209 | .body .column td.small-3, 1210 | td.small-3 center, 1211 | .body .columns th.small-3, 1212 | .body .column th.small-3, 1213 | th.small-3 center { 1214 | display: inline-block !important; 1215 | width: 25% !important; } 1216 | .body .columns td.small-4, 1217 | .body .column td.small-4, 1218 | td.small-4 center, 1219 | .body .columns th.small-4, 1220 | .body .column th.small-4, 1221 | th.small-4 center { 1222 | display: inline-block !important; 1223 | width: 33.33333% !important; } 1224 | .body .columns td.small-5, 1225 | .body .column td.small-5, 1226 | td.small-5 center, 1227 | .body .columns th.small-5, 1228 | .body .column th.small-5, 1229 | th.small-5 center { 1230 | display: inline-block !important; 1231 | width: 41.66667% !important; } 1232 | .body .columns td.small-6, 1233 | .body .column td.small-6, 1234 | td.small-6 center, 1235 | .body .columns th.small-6, 1236 | .body .column th.small-6, 1237 | th.small-6 center { 1238 | display: inline-block !important; 1239 | width: 50% !important; } 1240 | .body .columns td.small-7, 1241 | .body .column td.small-7, 1242 | td.small-7 center, 1243 | .body .columns th.small-7, 1244 | .body .column th.small-7, 1245 | th.small-7 center { 1246 | display: inline-block !important; 1247 | width: 58.33333% !important; } 1248 | .body .columns td.small-8, 1249 | .body .column td.small-8, 1250 | td.small-8 center, 1251 | .body .columns th.small-8, 1252 | .body .column th.small-8, 1253 | th.small-8 center { 1254 | display: inline-block !important; 1255 | width: 66.66667% !important; } 1256 | .body .columns td.small-9, 1257 | .body .column td.small-9, 1258 | td.small-9 center, 1259 | .body .columns th.small-9, 1260 | .body .column th.small-9, 1261 | th.small-9 center { 1262 | display: inline-block !important; 1263 | width: 75% !important; } 1264 | .body .columns td.small-10, 1265 | .body .column td.small-10, 1266 | td.small-10 center, 1267 | .body .columns th.small-10, 1268 | .body .column th.small-10, 1269 | th.small-10 center { 1270 | display: inline-block !important; 1271 | width: 83.33333% !important; } 1272 | .body .columns td.small-11, 1273 | .body .column td.small-11, 1274 | td.small-11 center, 1275 | .body .columns th.small-11, 1276 | .body .column th.small-11, 1277 | th.small-11 center { 1278 | display: inline-block !important; 1279 | width: 91.66667% !important; } 1280 | table.body td.small-offset-1, 1281 | table.body th.small-offset-1 { 1282 | margin-left: 8.33333% !important; 1283 | Margin-left: 8.33333% !important; } 1284 | table.body td.small-offset-2, 1285 | table.body th.small-offset-2 { 1286 | margin-left: 16.66667% !important; 1287 | Margin-left: 16.66667% !important; } 1288 | table.body td.small-offset-3, 1289 | table.body th.small-offset-3 { 1290 | margin-left: 25% !important; 1291 | Margin-left: 25% !important; } 1292 | table.body td.small-offset-4, 1293 | table.body th.small-offset-4 { 1294 | margin-left: 33.33333% !important; 1295 | Margin-left: 33.33333% !important; } 1296 | table.body td.small-offset-5, 1297 | table.body th.small-offset-5 { 1298 | margin-left: 41.66667% !important; 1299 | Margin-left: 41.66667% !important; } 1300 | table.body td.small-offset-6, 1301 | table.body th.small-offset-6 { 1302 | margin-left: 50% !important; 1303 | Margin-left: 50% !important; } 1304 | table.body td.small-offset-7, 1305 | table.body th.small-offset-7 { 1306 | margin-left: 58.33333% !important; 1307 | Margin-left: 58.33333% !important; } 1308 | table.body td.small-offset-8, 1309 | table.body th.small-offset-8 { 1310 | margin-left: 66.66667% !important; 1311 | Margin-left: 66.66667% !important; } 1312 | table.body td.small-offset-9, 1313 | table.body th.small-offset-9 { 1314 | margin-left: 75% !important; 1315 | Margin-left: 75% !important; } 1316 | table.body td.small-offset-10, 1317 | table.body th.small-offset-10 { 1318 | margin-left: 83.33333% !important; 1319 | Margin-left: 83.33333% !important; } 1320 | table.body td.small-offset-11, 1321 | table.body th.small-offset-11 { 1322 | margin-left: 91.66667% !important; 1323 | Margin-left: 91.66667% !important; } 1324 | table.body table.columns td.expander, 1325 | table.body table.columns th.expander { 1326 | display: none !important; } 1327 | table.body .right-text-pad, 1328 | table.body .text-pad-right { 1329 | padding-left: 10px !important; } 1330 | table.body .left-text-pad, 1331 | table.body .text-pad-left { 1332 | padding-right: 10px !important; } 1333 | table.menu { 1334 | width: 100% !important; } 1335 | table.menu td, 1336 | table.menu th { 1337 | width: auto !important; 1338 | display: inline-block !important; } 1339 | table.menu.vertical td, 1340 | table.menu.vertical th, table.menu.small-vertical td, 1341 | table.menu.small-vertical th { 1342 | display: block !important; } 1343 | table.menu[align="center"] { 1344 | width: auto !important; } 1345 | table.button.expand { 1346 | width: 100% !important; } } 1347 | 1348 | .footer-drip { 1349 | background: #F3F3F3; 1350 | border-radius: 0 0 10px 10px; } 1351 | 1352 | .footer-drip .columns { 1353 | padding-top: 16px; } 1354 | 1355 | .container.header-drip { 1356 | background: #F3F3F3; } 1357 | 1358 | .container.header-drip .columns { 1359 | padding-bottom: 16px; 1360 | padding-top: 16px; } 1361 | 1362 | .container.body-drip { 1363 | border-radius: 10px; 1364 | border-top: 10px solid #663399; } 1365 | 1366 | .header { 1367 | background: #8a8a8a; } 1368 | 1369 | .header p { 1370 | color: #ffffff; 1371 | margin: 0; } 1372 | 1373 | .header .columns { 1374 | padding-bottom: 0; } 1375 | 1376 | .header .container { 1377 | background: #8a8a8a; 1378 | padding-top: 16px; 1379 | padding-bottom: 16px; } 1380 | 1381 | .header .container td { 1382 | padding-top: 16px; 1383 | padding-bottom: 16px; } 1384 | 1385 | .no-bg { 1386 | background: transparent !important; } 1387 | 1388 | .custom-pb { 1389 | padding-bottom: 10px !important; } 1390 | 1391 | .tiny-text { 1392 | font-size: 12px; } 1393 | 1394 | .text-uppercase { 1395 | text-transform: uppercase; } 1396 | 1397 | .basic-link { 1398 | text-decoration: underline; 1399 | color: #000; } 1400 | 1401 | .main-sub-heading { 1402 | color: #666666; 1403 | text-transform: uppercase; 1404 | margin: 0; 1405 | font-size: 20px; } 1406 | 1407 | .main-heading { 1408 | text-transform: uppercase; 1409 | margin: 0; 1410 | font-size: 22px; } 1411 | 1412 | .main-body-p { 1413 | color: #666666; 1414 | line-height: 1.57143; } 1415 | 1416 | .decorative-line { 1417 | background: #666666; 1418 | height: 2px; } 1419 | 1420 | .item-name { 1421 | text-transform: uppercase; 1422 | color: #F61067; } 1423 | 1424 | .item-price { 1425 | color: #666666; } 1426 | 1427 | table.button { 1428 | margin-bottom: 0; } 1429 | table.button table td { 1430 | padding: 12px 35px 12px 35px; } 1431 | table.button table td a { 1432 | padding: 0px; } 1433 | --------------------------------------------------------------------------------