Cleanup GrapeJS/Mosaico Templates

This commit is contained in:
witzig 2017-03-09 11:55:09 +01:00
parent abdc822f81
commit c36071524d
6 changed files with 140 additions and 140 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

View file

@ -15,7 +15,7 @@
<table class="c1766">
<tr>
<td class="cell c1769">
<img class="c926" src="http://artf.github.io/grapesjs/img/grapesjs-logo.png" alt="GrapesJS."/>
<img class="c926" src="/grapejs/templates/demo/images/grapesjs-logo.png" alt="GrapesJS."/>
</td>
<td class="cell c1776">
<div class="c1144">GrapesJS Newsletter Builder
@ -27,7 +27,7 @@
<table class="card">
<tr>
<td class="card-cell">
<img class="c1271" src="http://artf.github.io/grapesjs/img/tmp-header-txt.jpg" alt="Big image here"/>
<img class="c1271" src="/grapejs/templates/demo/images/550x250.png" alt="Big image here"/>
<table class="table100 c1357">
<tr>
<td class="card-content">
@ -56,7 +56,7 @@
<table class="list-item-content">
<tr class="list-item-row">
<td class="list-cell-left">
<img class="list-item-image" src="http://artf.github.io/grapesjs/img/tmp-blocks.jpg" alt="Image1"/>
<img class="list-item-image" src="/grapejs/templates/demo/images/150x150.png" alt="Image1"/>
</td>
<td class="list-cell-right">
<h1 class="card-title">Built-in Blocks
@ -75,7 +75,7 @@
<table class="list-item-content">
<tr class="list-item-row">
<td class="list-cell-left">
<img class="list-item-image" src="http://artf.github.io/grapesjs/img/tmp-tgl-images.jpg" alt="Image2"/>
<img class="list-item-image" src="/grapejs/templates/demo/images/150x150.png" alt="Image2"/>
</td>
<td class="list-cell-right">
<h1 class="card-title">Toggle images
@ -94,7 +94,7 @@
<table class="grid-item-card">
<tr>
<td class="grid-item-card-cell">
<img class="grid-item-image" src="http://artf.github.io/grapesjs/img/tmp-send-test.jpg" alt="Image1"/>
<img class="grid-item-image" src="/grapejs/templates/demo/images/250x150.png" alt="Image1"/>
<table class="grid-item-card-body">
<tr>
<td class="grid-item-card-content">
@ -113,7 +113,7 @@
<table class="grid-item-card">
<tr>
<td class="grid-item-card-cell">
<img class="grid-item-image" src="http://artf.github.io/grapesjs/img/tmp-devices.jpg" alt="Image2"/>
<img class="grid-item-image" src="/grapejs/templates/demo/images/250x150.png" alt="Image2"/>
<table class="grid-item-card-body">
<tr>
<td class="grid-item-card-content">

View file

@ -37,18 +37,18 @@
widget: text;
help: Alternative text will be shown on email clients that does not download image automatically;
}
sponsor { label: Sponsor; properties: visible=true src url alt; category: hidden }
titleText {label:Title Text;category: hidden;}
sponsor { label: Sponsor; properties: visible=true; }
titleText { label: HTML Title; extend: text; }
gutterVisible { label: Show Gutter; extend: visible }
socialIconType { label: Icon Version;widget: select; options:bw=Black and White|colors=Colors; }
preheaderLinkOption {
label: Unsubscribe Link;
widget: select;
options: [profile_link]=Profile|[unsubscribe_link]=Unsubscribe|none=None;
options: [LINK_PREFERENCES]=Preferences|[LINK_UNSUBSCRIBE]=Unsubscribe|none=None;
help: If -None- is selected, preHeader text will be shown;
}
hrStyle { label: Separator Style;properties:color hrWidth hrHeight; }
hrStyle:preview { height: 200%; width: 200%; bottom: 20px; -ko-border-bottom: @[hrHeight]px solid @color; }
preheaderVisible { label: Show Preheader; extend: visible; help: Preheader block is the first one on the top of the page. It contains web version link and optionally unsubscribe link or a preheader text that will be shown as a preview on some email clients; }
@ -59,7 +59,7 @@
image { label: Image; properties: src url alt }
backgroundColor { label: Background Color; extend: color }
buttonLink { label: Button; extend: link }
/* texts and links */
textStyle { label: Text; properties: face color size }
textStyle:preview { -ko-bind-text: @['AaZz']; -ko-font-family: @face; -ko-color: @color; -ko-font-size: @[size]px; }
@ -74,7 +74,7 @@
externalTextStyle { label: Alternative Text; extend: textStyle }
externalTextStyle:preview { -ko-bind-text: @['AaZz']; -ko-font-family: @face; -ko-color: @color; -ko-font-size: @[size]px; }
bigTitleStyle { label: Title; properties: face color size align}
bigTitleStyle:preview { -ko-bind-text: @['AaZz']; -ko-font-family: @face; -ko-color: @color; -ko-font-size: @[size]px; }
/* buttons */
@ -82,7 +82,7 @@
buttonStyle size { label: Text Size; extend: size }
buttonStyle { label: Button; properties: face color size buttonColor radius }
buttonStyle:preview { -ko-bind-text: @['Button']; -ko-font-family: @face; -ko-color: @color; -ko-font-size: @[size]px; -ko-background-color: @buttonColor; padding-left: 5px; -ko-border-radius: @[radius]px; }
/* contents */
preheaderText {label: PreHeader Text; extend:text; help: This text will be shown on some email clients as a preview of the email contents;}
leftImage { label: Left Image; extend: image }
@ -110,7 +110,7 @@
template { label: Page; theme: frameTheme ;properties: preheaderVisible=true; version: 1.0.6; }
footerBlock { label: Unsubscribe Block; theme: frameTheme }
socialBlock fbVisible { label: Facebook; }
socialBlock twVisible { label: Twitter }
socialBlock ggVisible { label: Google+ }
@ -135,7 +135,7 @@
variant:socialIconType;
theme: frameTheme
}
preheaderBlock { label:Preheader Block; theme: frameTheme}
sideArticleBlock imagePos {label:Image position;widget:select; options: left=Left|right=Right; }
@ -149,10 +149,10 @@
doubleArticleBlock { label: 2 Columns Block; properties: backgroundColor titleVisible=true buttonVisible=true imageVisible=true titleTextStyle longTextStyle buttonStyle leftImage leftLongText leftButtonLink rightImage rightLongText rightButtonLink; theme: contentTheme}
tripleArticleBlock { label: 3 Columns Block; properties: backgroundColor titleVisible=true buttonVisible=true imageVisible=true titleTextStyle longTextStyle buttonStyle leftImage leftLongText leftButtonLink middleImage middleLongText middleButtonLink rightImage rightLongText rightButtonLink; theme: contentTheme}
logoBlock imageWidth { label: Image Size; widget: select; options: 166=Small|258=Medium|350=Big; variant:imageWidth;}
logoBlock { label: Logo Block; properties: image imageWidth=258; variant: imageWidth; theme: contentTheme}
titleBlock { label: Title; theme: contentTheme}
imageBlock longTextStyle {
@ -278,12 +278,12 @@
width: 100% !important;
max-width: none !important;
height: auto !important;
}
}
}
</style>
<style type="text/css" data-inline="true">
[data-ko-block=tripleArticleBlock] .links-color a,
[data-ko-block=tripleArticleBlock] .links-color a:link,
[data-ko-block=tripleArticleBlock] .links-color a,
[data-ko-block=tripleArticleBlock] .links-color a:link,
[data-ko-block=tripleArticleBlock] .links-color a:visited,
[data-ko-block=tripleArticleBlock] .links-color a:hover {
color: #3f3f3f;
@ -294,8 +294,8 @@
[data-ko-block=tripleArticleBlock] .long-text p:last-child { Margin-bottom: 0px; }
[data-ko-block=tripleArticleBlock] .long-text p:first-child { Margin-top: 0px; }
[data-ko-block=doubleArticleBlock] .links-color a,
[data-ko-block=doubleArticleBlock] .links-color a:link,
[data-ko-block=doubleArticleBlock] .links-color a,
[data-ko-block=doubleArticleBlock] .links-color a:link,
[data-ko-block=doubleArticleBlock] .links-color a:visited,
[data-ko-block=doubleArticleBlock] .links-color a:hover {
color: #3f3f3f;
@ -306,8 +306,8 @@
[data-ko-block=doubleArticleBlock] .long-text p:last-child { Margin-bottom: 0px; }
[data-ko-block=doubleArticleBlock] .long-text p:first-child { Margin-top: 0px; }
[data-ko-block=singleArticleBlock] .links-color a,
[data-ko-block=singleArticleBlock] .links-color a:link,
[data-ko-block=singleArticleBlock] .links-color a,
[data-ko-block=singleArticleBlock] .links-color a:link,
[data-ko-block=singleArticleBlock] .links-color a:visited,
[data-ko-block=singleArticleBlock] .links-color a:hover {
color: #3f3f3f;
@ -318,8 +318,8 @@
[data-ko-block=singleArticleBlock] .long-text p:last-child { Margin-bottom: 0px; }
[data-ko-block=singleArticleBlock] .long-text p:first-child { Margin-top: 0px; }
[data-ko-block=textBlock] .links-color a,
[data-ko-block=textBlock] .links-color a:link,
[data-ko-block=textBlock] .links-color a,
[data-ko-block=textBlock] .links-color a:link,
[data-ko-block=textBlock] .links-color a:visited,
[data-ko-block=textBlock] .links-color a:hover {
color: #3f3f3f;
@ -330,8 +330,8 @@
[data-ko-block=textBlock] .long-text p:last-child { Margin-bottom: 0px; }
[data-ko-block=textBlock] .long-text p:first-child { Margin-top: 0px; }
[data-ko-block=sideArticleBlock] .links-color a,
[data-ko-block=sideArticleBlock] .links-color a:link,
[data-ko-block=sideArticleBlock] .links-color a,
[data-ko-block=sideArticleBlock] .links-color a:link,
[data-ko-block=sideArticleBlock] .links-color a:visited,
[data-ko-block=sideArticleBlock] .links-color a:hover {
color: #3f3f3f;
@ -342,8 +342,8 @@
[data-ko-block=sideArticleBlock] .long-text p:last-child { Margin-bottom: 0px; }
[data-ko-block=sideArticleBlock] .long-text p:first-child { Margin-top: 0px; }
[data-ko-block=socialBlock] .links-color a,
[data-ko-block=socialBlock] .links-color a:link,
[data-ko-block=socialBlock] .links-color a,
[data-ko-block=socialBlock] .links-color a:link,
[data-ko-block=socialBlock] .links-color a:visited,
[data-ko-block=socialBlock] .links-color a:hover {
color: #cccccc;
@ -354,8 +354,8 @@
[data-ko-block=socialBlock] .long-text p:last-child { Margin-bottom: 0px; }
[data-ko-block=socialBlock] .long-text p:first-child { Margin-top: 0px; }
[data-ko-block=footerBlock] .links-color a,
[data-ko-block=footerBlock] .links-color a:link,
[data-ko-block=footerBlock] .links-color a,
[data-ko-block=footerBlock] .links-color a:link,
[data-ko-block=footerBlock] .links-color a:visited,
[data-ko-block=footerBlock] .links-color a:hover {
color: #cccccc;
@ -407,28 +407,28 @@
<tr>
<td class="vb-outer" align="center" valign="top" bgcolor="#3f3f3f"
style="background-color: #3f3f3f; -ko-background-color: @backgroundColor; -ko-attr-bgcolor: @backgroundColor">
<div style="display: none; font-size:1px; color: #333333; line-height: 1px; max-height:0px; max-width: 0px; opacity: 0; overflow: hidden;
<div style="display: none; font-size:1px; color: #333333; line-height: 1px; max-height:0px; max-width: 0px; opacity: 0; overflow: hidden;
-ko-bind-text: @preheaderText"></div>
<!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="570"><tr><td align="center" valign="top"><![endif]-->
<div class="oldwebkit">
<table width="570" border="0" cellpadding="0" cellspacing="0" class="vb-row halfpad" bgcolor="#3f3f3f"
<table width="570" border="0" cellpadding="0" cellspacing="0" class="vb-row halfpad" bgcolor="#3f3f3f"
style="width: 100%; max-width: 570px; background-color: #3f3f3f; -ko-attr-bgcolor: @backgroundColor; -ko-background-color: @backgroundColor;">
<tr>
<td align="center" valign="top" bgcolor="#3f3f3f" style="font-size: 0; background-color: #3f3f3f;
-ko-attr-bgcolor: @backgroundColor; -ko-background-color: @backgroundColor" align="left">
<!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="552"><tr><![endif]-->
<!--[if (gte mso 9)|(lte ie 8)]><td align="left" valign="top" width="276"><![endif]-->
<div style="display:inline-block; max-width:276px; vertical-align:top; width:100%;" class="mobile-full">
<!--[if (gte mso 9)|(lte ie 8)]><td align="left" valign="top" width="276"><![endif]-->
<div style="display:inline-block; max-width:276px; vertical-align:top; width:100%;" class="mobile-full">
<table class="vb-content" border="0" cellspacing="9" cellpadding="0" width="276" style="width: 100%;" align="left">
<tr>
<td width="100%" valign="top" align="left" style="font-weight: normal; text-align:left; font-size: 13px;
font-family: Arial, Helvetica, sans-serif; color: #ffffff;
-ko-font-size: @[linkStyle.size]px; -ko-color: @linkStyle.color; -ko-font-family: @linkStyle.face">
<a data-ko-display="preheaderLinkOption neq 'none'" data-ko-editable="unsubscribeText" href="[unsubscribe_link]"
style="text-decoration: underline; color: #ffffff; -ko-attr-href: @preheaderLinkOption;
-ko-color: @linkStyle.color; -ko-text-decoration: @linkStyle.decoration">Unsubscribe</a>
<a data-ko-display="preheaderLinkOption neq 'none'" data-ko-editable="unsubscribeText" href="[LINK_PREFERENCES]"
style="text-decoration: underline; color: #ffffff; -ko-attr-href: @preheaderLinkOption;
-ko-color: @linkStyle.color; -ko-text-decoration: @linkStyle.decoration">Preferences</a>
<span data-ko-display="preheaderLinkOption eq 'none'" style="font-size: 13px;color: #919191; font-weight: normal; text-align:center;
font-family: Arial, Helvetica, sans-serif; -ko-font-size: @[longTextStyle.size]px; -ko-color: @longTextStyle.color;
-ko-font-family: @longTextStyle.face; -ko-bind-text: @preheaderText; display: none"></span>
@ -437,7 +437,7 @@
</table>
</div><!--[if (gte mso 9)|(lte ie 8)]>
</td><td align="left" valign="top" width="276">
<![endif]--><div style="display:inline-block; max-width:276px; vertical-align:top; width:100%;" class="mobile-full mobile-hide">
<![endif]--><div style="display:inline-block; max-width:276px; vertical-align:top; width:100%;" class="mobile-full mobile-hide">
<table class="vb-content" border="0" cellspacing="9" cellpadding="0" width="276" style="width: 100%; text-align: right;" align="left">
<tr>
@ -445,7 +445,7 @@
-ko-font-size: @[linkStyle.size]px; -ko-color: @linkStyle.color; -ko-font-family: @linkStyle.face">
<span style="color: #ffffff; text-decoration: underline;
-ko-color: @linkStyle.color; -ko-text-decoration: @linkStyle.decoration">
<a data-ko-editable="webversionText" href="[show_link]"
<a data-ko-editable="webversionText" href="[LINK_BROWSER]"
style="text-decoration: underline; color: #ffffff;
-ko-color: @linkStyle.color; -ko-text-decoration: @linkStyle.decoration">View in your browser</a>
</span>
@ -484,13 +484,13 @@
<td valign="top" align="center">
<!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="258" style="-ko-attr-width: @[imageWidth]"><tr><td align="center" valign="top"><![endif]-->
<div style="display:inline-block; max-width:258px; -ko-max-width: @[imageWidth]px; vertical-align:top; width:100%;" class="mobile-full">
<div style="display:inline-block; max-width:258px; -ko-max-width: @[imageWidth]px; vertical-align:top; width:100%;" class="mobile-full">
<a data-ko-link="image.url" href="" style="font-size: 18px; font-family: Arial, Helvetica, sans-serif; color: #f3f3f3;
text-decoration: none; -ko-font-size: @[externalTextStyle.size]px;
-ko-font-family: @externalTextStyle.face; -ko-color: @externalTextStyle.color"><img
data-ko-editable="image.src" width="258" data-ko-placeholder-height="150"
data-ko-editable="image.src" width="258" data-ko-placeholder-height="150"
style="-ko-attr-alt: @image.alt; width: 100%; max-width: 258px; -ko-attr-width: @imageWidth; -ko-max-width: @[imageWidth]px;"
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=258%2C150" vspace="0" hspace="0" border="0" alt="" /></a>
src="/editorapi/img?method=placeholder&params=258%2C150" vspace="0" hspace="0" border="0" alt="" /></a>
</div>
<!--[if (gte mso 9)|(lte ie 8)]></td></tr></table><![endif]-->
@ -514,15 +514,15 @@
<!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="570"><tr><td align="center" valign="top"><![endif]-->
<div class="oldwebkit">
<table width="570" border="0" cellpadding="0" cellspacing="9" class="vb-row fullpad" bgcolor="#ffffff"
<table width="570" border="0" cellpadding="0" cellspacing="9" class="vb-row fullpad" bgcolor="#ffffff"
style="width: 100%; max-width: 570px; background-color: #ffffff; -ko-attr-bgcolor: @backgroundColor; -ko-background-color: @backgroundColor;">
<tr>
<td align="center" class="mobile-row" valign="top" style="font-size: 0;">
<!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="552"><tr><![endif]-->
<div data-ko-display="imagePos eq 'left'" data-ko-wrap="false" style="width: 100%; max-width:184px; -ko-max-width:@[18 + Math.round(imageWidth)]px; display:inline-block" class="mobile-full">
<!--[if (gte mso 9)|(lte ie 8)]><td align="left" valign="top" width="184" style="-ko-attr-width: @[18 + Math.round(imageWidth)]"><![endif]-->
<div style="display:inline-block; max-width:184px; -ko-max-width:@[18 + Math.round(imageWidth)]px; vertical-align:top; width:100%;" class="mobile-full">
<!--[if (gte mso 9)|(lte ie 8)]><td align="left" valign="top" width="184" style="-ko-attr-width: @[18 + Math.round(imageWidth)]"><![endif]-->
<div style="display:inline-block; max-width:184px; -ko-max-width:@[18 + Math.round(imageWidth)]px; vertical-align:top; width:100%;" class="mobile-full">
<table class="vb-content" border="0" cellspacing="9" cellpadding="0" width="184" style="width: 100%; -ko-attr-width: @[18 + Math.round(imageWidth)]" align="left">
<tr>
@ -530,7 +530,7 @@
<a data-ko-link="image.url" href="">
<img data-ko-editable="image.src" border="0" hspace="0" vspace="0" width="166"
data-ko-placeholder-height="130" class="mobile-full" alt=""
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=166%2C130"
src="/editorapi/img?method=placeholder&params=166%2C130"
style="vertical-align: top; width: 100%; height: auto; -ko-attr-width: @imageWidth; max-width: 166px; -ko-max-width: @[imageWidth]px; -ko-attr-alt: @image.alt" />
</a>
</td>
@ -540,7 +540,7 @@
</div><!--[if (gte mso 9)|(lte ie 8)]></td>
<![endif]--></div><!--[if (gte mso 9)|(lte ie 8)]>
<td align="left" valign="top" width="368" style="-ko-attr-width: @[570 - 2 * 18 - Math.round(imageWidth)]">
<![endif]--><div style="display:inline-block; max-width:368px; -ko-max-width: @[570 - 2 * 18 - Math.round(imageWidth)]px; vertical-align:top; width:100%;" class="mobile-full">
<![endif]--><div style="display:inline-block; max-width:368px; -ko-max-width: @[570 - 2 * 18 - Math.round(imageWidth)]px; vertical-align:top; width:100%;" class="mobile-full">
<table class="vb-content" border="0" cellspacing="9" cellpadding="0" width="368" style="width: 100%; -ko-attr-width: @[570 - 2 * 18 - Math.round(imageWidth)]" align="left">
<tr data-ko-display="titleVisible">
@ -562,7 +562,7 @@
<td valign="top">
<table cellpadding="0" border="0" align="left" cellspacing="0" class="mobile-full" style="padding-top: 4px">
<tr>
<td width="auto" valign="middle" bgcolor="#bfbfbf" align="center" height="26"
<td width="auto" valign="middle" bgcolor="#bfbfbf" align="center" height="26"
style="font-size: 13px; font-family: Arial, Helvetica, sans-serif; text-align:center; color: #3f3f3f; font-weight: normal;
padding-left: 18px; padding-right: 18px; background-color: #bfbfbf; border-radius: 4px;
-ko-border-radius: @[buttonStyle.radius]px;
@ -579,14 +579,14 @@
</div><!--[if (gte mso 9)|(lte ie 8)]></td>
<![endif]--><div data-ko-display="imagePos eq 'right'" data-ko-wrap="false" style="width: 100%; max-width:184px; -ko-max-width:@[18 + Math.round(imageWidth)]px; display:inline-block; display: none;" class="mobile-full"><!--[if (gte mso 9)|(lte ie 8)]>
<td data-ko-display="imagePos eq 'right'" align="left" valign="top" width="184" style="display: none; -ko-attr-width: @[18 + Math.round(imageWidth)]">
<![endif]--><div style="display:inline-block; max-width:184px; -ko-max-width:@[18 + Math.round(imageWidth)]px; vertical-align:top; width:100%;" class="mobile-full">
<![endif]--><div style="display:inline-block; max-width:184px; -ko-max-width:@[18 + Math.round(imageWidth)]px; vertical-align:top; width:100%;" class="mobile-full">
<table class="vb-content" border="0" cellspacing="9" cellpadding="0" width="184" style="width: 100%; -ko-attr-width: @[18 + Math.round(imageWidth)]" align="left">
<tr>
<td width="100%" valign="top" align="left" class="links-color">
<a data-ko-link="image.url" href="">
<img data-ko-editable="image.src" border="0" hspace="0" vspace="0" width="166" data-ko-placeholder-height="130" class="mobile-full"
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=166%2C130" class="mobile-full"
src="/editorapi/img?method=placeholder&params=166%2C130" class="mobile-full"
alt="" style="vertical-align:top; width: 100%; height: auto; -ko-attr-width: @imageWidth; max-width: 166px; -ko-max-width: @[imageWidth]px; -ko-attr-alt: @image.alt" />
</a>
</td>
@ -617,13 +617,13 @@
<!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="570"><tr><td align="center" valign="top"><![endif]-->
<div class="oldwebkit">
<table width="570" border="0" cellpadding="0" cellspacing="18" class="vb-container fullpad" bgcolor="#ffffff"
<table width="570" border="0" cellpadding="0" cellspacing="18" class="vb-container fullpad" bgcolor="#ffffff"
style="width: 100%; max-width: 570px; background-color: #ffffff; -ko-attr-bgcolor: @backgroundColor; -ko-background-color: @backgroundColor;">
<tr data-ko-display="imageVisible">
<td width="100%" valign="top" align="left" class="links-color">
<a data-ko-link="image.url" href="">
<img data-ko-editable="image.src" border="0" hspace="0" vspace="0" width="534" data-ko-placeholder-height="200"
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=534%2C200" class="mobile-full"
src="/editorapi/img?method=placeholder&params=534%2C200" class="mobile-full"
alt="" style="vertical-align:top; max-width:534px; width: 100%; height: auto;
-ko-attr-alt: @image.alt" />
</a>
@ -655,7 +655,7 @@
<td valign="top">
<table cellpadding="0" border="0" align="left" cellspacing="0" class="mobile-full">
<tr>
<td width="auto" valign="middle" bgcolor="#bfbfbf" align="center" height="26"
<td width="auto" valign="middle" bgcolor="#bfbfbf" align="center" height="26"
style="font-size: 13px; font-family: Arial, Helvetica, sans-serif; text-align:center; color: #3f3f3f; font-weight: normal;
padding-left: 18px; padding-right: 18px; background-color: #bfbfbf; border-radius: 4px;
-ko-border-radius: @[buttonStyle.radius]px;
@ -686,10 +686,10 @@
<!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="570"><tr><td align="center" valign="top"><![endif]-->
<div class="oldwebkit">
<table width="570" border="0" cellpadding="0" cellspacing="9" class="vb-container halfpad" bgcolor="#ffffff"
<table width="570" border="0" cellpadding="0" cellspacing="9" class="vb-container halfpad" bgcolor="#ffffff"
style="width: 100%; max-width: 570px; background-color: #ffffff; -ko-attr-bgcolor: @backgroundColor; -ko-background-color: @backgroundColor;">
<tr>
<td bgcolor="#ffffff" align="center"
<td bgcolor="#ffffff" align="center"
style="background-color: #ffffff; font-size: 22px; font-family: Arial, Helvetica, sans-serif; color: #3f3f3f; text-align: center;
-ko-attr-align: @bigTitleStyle.align; -ko-attr-bgcolor: @backgroundColor; -ko-background-color: @backgroundColor;
-ko-font-size: @[bigTitleStyle.size]px; -ko-font-family: @bigTitleStyle.face; -ko-color: @bigTitleStyle.color; -ko-text-align: @bigTitleStyle.align">
@ -713,7 +713,7 @@
<!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="570"><tr><td align="center" valign="top"><![endif]-->
<div class="oldwebkit">
<table width="570" border="0" cellpadding="0" cellspacing="18" class="vb-container fullpad" bgcolor="#ffffff"
<table width="570" border="0" cellpadding="0" cellspacing="18" class="vb-container fullpad" bgcolor="#ffffff"
style="width: 100%; max-width: 570px; background-color: #ffffff; -ko-attr-bgcolor: @backgroundColor; -ko-background-color: @backgroundColor;">
<tr>
<td align="left" style="text-align: left; font-size: 13px; font-family: Arial, Helvetica, sans-serif; color: #3f3f3f;
@ -740,22 +740,22 @@
<!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="570"><tr><td align="center" valign="top"><![endif]-->
<div class="oldwebkit">
<table width="570" border="0" cellpadding="0" cellspacing="9" class="vb-row fullpad" bgcolor="#ffffff"
<table width="570" border="0" cellpadding="0" cellspacing="9" class="vb-row fullpad" bgcolor="#ffffff"
style="width: 100%; max-width: 570px; background-color: #ffffff; -ko-attr-bgcolor: @backgroundColor; -ko-background-color: @backgroundColor;">
<tr>
<td align="center" valign="top" class="mobile-row" style="font-size: 0">
<!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="552"><tr><![endif]-->
<!--[if (gte mso 9)|(lte ie 8)]><td align="left" valign="top" width="184"><![endif]-->
<div style="display:inline-block; max-width:184px; vertical-align:top; width:100%;" class="mobile-full">
<!--[if (gte mso 9)|(lte ie 8)]><td align="left" valign="top" width="184"><![endif]-->
<div style="display:inline-block; max-width:184px; vertical-align:top; width:100%;" class="mobile-full">
<table class="vb-content" border="0" cellspacing="9" cellpadding="0" width="184" style="width: 100%" align="left">
<tr data-ko-display="imageVisible">
<td width="100%" valign="top" align="left" class="links-color" style="padding-bottom: 9px">
<a data-ko-link="leftImage.url" href="">
<img data-ko-editable="leftImage.src" border="0" hspace="0" vspace="0" width="166" height="90"
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=166%2C90" class="mobile-full"
alt="" style="vertical-align:top; width: 100%; height: auto; -ko-attr-height: @imageHeight;
src="/editorapi/img?method=placeholder&params=166%2C90" class="mobile-full"
alt="" style="vertical-align:top; width: 100%; height: auto; -ko-attr-height: @imageHeight;
-ko-attr-alt: @leftImage.alt" />
</a>
</td>
@ -768,7 +768,7 @@
</td>
</tr>
<tr>
<td align="left" style="text-align: left; font-size: 13px; font-family: Arial, Helvetica, sans-serif; color: #3f3f3f;
<td align="left" style="text-align: left; font-size: 13px; font-family: Arial, Helvetica, sans-serif; color: #3f3f3f;
-ko-font-size: @[longTextStyle.size]px; -ko-font-family: @longTextStyle.face; -ko-color: @longTextStyle.color"
data-ko-editable="leftLongText" class="long-text links-color">
<p>Far far away, behind the word mountains, far from the countries <a href="">Vokalia and Consonantia</a>, there live the blind texts. </p>
@ -778,7 +778,7 @@
<td valign="top">
<table cellpadding="0" border="0" align="left" cellspacing="0" class="mobile-full" style="padding-top: 4px">
<tr>
<td width="auto" valign="middle" bgcolor="#bfbfbf" align="center" height="26"
<td width="auto" valign="middle" bgcolor="#bfbfbf" align="center" height="26"
style="font-size: 13px; font-family: Arial, Helvetica, sans-serif; text-align:center; color: #3f3f3f; font-weight: normal;
padding-left: 18px; padding-right: 18px; background-color: #bfbfbf; border-radius: 4px;
-ko-border-radius: @[buttonStyle.radius]px;
@ -795,15 +795,15 @@
</div><!--[if (gte mso 9)|(lte ie 8)]></td>
<td align="left" valign="top" width="184">
<![endif]--><div style="display:inline-block; max-width:184px; vertical-align:top; width:100%;" class="mobile-full">
<![endif]--><div style="display:inline-block; max-width:184px; vertical-align:top; width:100%;" class="mobile-full">
<table class="vb-content" border="0" cellspacing="9" cellpadding="0" width="184" style="width: 100%" align="left">
<tr data-ko-display="imageVisible">
<td width="100%" valign="top" align="left" class="links-color" style="padding-bottom: 9px">
<a data-ko-link="middleImage.url">
<img data-ko-editable="middleImage.src" border="0" hspace="0" vspace="0" width="166" height="90"
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=166%2C90" class="mobile-full"
alt="" style="vertical-align:top; width: 100%; height: auto; -ko-attr-height: @imageHeight;
src="/editorapi/img?method=placeholder&params=166%2C90" class="mobile-full"
alt="" style="vertical-align:top; width: 100%; height: auto; -ko-attr-height: @imageHeight;
-ko-attr-alt: @middleImage.alt" />
</a>
</td>
@ -827,7 +827,7 @@
<td valign="top">
<table cellpadding="0" border="0" align="left" cellspacing="0" class="mobile-full" style="padding-top: 4px">
<tr>
<td width="auto" valign="middle" bgcolor="#bfbfbf" align="center" height="26"
<td width="auto" valign="middle" bgcolor="#bfbfbf" align="center" height="26"
style="font-size: 13px; font-family: Arial, Helvetica, sans-serif; text-align:center; color: #3f3f3f; font-weight: normal;
padding-left: 18px; padding-right: 18px; background-color: #bfbfbf; border-radius: 4px;
-ko-border-radius: @[buttonStyle.radius]px;
@ -844,15 +844,15 @@
</div><!--[if (gte mso 9)|(lte ie 8)]></td>
<td align="left" valign="top" width="184">
<![endif]--><div style="display:inline-block; max-width:184px; vertical-align:top; width:100%;" class="mobile-full">
<![endif]--><div style="display:inline-block; max-width:184px; vertical-align:top; width:100%;" class="mobile-full">
<table class="vb-content" border="0" cellspacing="9" cellpadding="0" width="184" style="width: 100%" align="right">
<tr data-ko-display="imageVisible">
<td width="100%" valign="top" align="left" class="links-color" style="padding-bottom: 9px">
<a data-ko-link="rightImage.url">
<img data-ko-editable="rightImage.src" border="0" hspace="0" vspace="0" width="166" height="90"
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=166%2C90" class="mobile-full"
alt="" style="vertical-align:top; width: 100%; height: auto; -ko-attr-height: @imageHeight;
src="/editorapi/img?method=placeholder&params=166%2C90" class="mobile-full"
alt="" style="vertical-align:top; width: 100%; height: auto; -ko-attr-height: @imageHeight;
-ko-attr-alt: @rightImage.alt" />
</a>
</td>
@ -876,7 +876,7 @@
<td valign="top">
<table cellpadding="0" border="0" align="left" cellspacing="0" class="mobile-full" style="padding-top: 4px">
<tr>
<td width="auto" valign="middle" bgcolor="#bfbfbf" align="center" height="26"
<td width="auto" valign="middle" bgcolor="#bfbfbf" align="center" height="26"
style="font-size: 13px; font-family: Arial, Helvetica, sans-serif; text-align:center; color: #3f3f3f; font-weight: normal;
padding-left: 18px; padding-right: 18px; background-color: #bfbfbf; border-radius: 4px;
-ko-border-radius: @[buttonStyle.radius]px;
@ -914,22 +914,22 @@
<!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="570"><tr><td align="center" valign="top"><![endif]-->
<div class="oldwebkit">
<table width="570" border="0" cellpadding="0" cellspacing="9" class="vb-row fullpad" bgcolor="#ffffff"
<table width="570" border="0" cellpadding="0" cellspacing="9" class="vb-row fullpad" bgcolor="#ffffff"
style="width: 100%; max-width: 570px; background-color: #ffffff; -ko-attr-bgcolor: @backgroundColor; -ko-background-color: @backgroundColor;">
<tr>
<td align="center" valign="top" style="font-size: 0">
<!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="552"><tr><![endif]-->
<!--[if (gte mso 9)|(lte ie 8)]><td align="left" valign="top" width="276"><![endif]-->
<div style="display:inline-block; max-width:276px; vertical-align:top; width:100%;" class="mobile-full">
<!--[if (gte mso 9)|(lte ie 8)]><td align="left" valign="top" width="276"><![endif]-->
<div style="display:inline-block; max-width:276px; vertical-align:top; width:100%;" class="mobile-full">
<table class="vb-content" border="0" cellspacing="9" cellpadding="0" width="276" style="width: 100%" align="left">
<tr data-ko-display="imageVisible">
<td width="100%" align="left" class="links-color" style="padding-bottom: 9px">
<a data-ko-link="leftImage.url">
<img data-ko-editable="leftImage.src" border="0" hspace="0" vspace="0" width="258" height="100"
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=258%2C100" class="mobile-full"
alt="" style="vertical-align:top; width: 100%; height: auto; -ko-attr-height: @imageHeight;
src="/editorapi/img?method=placeholder&params=258%2C100" class="mobile-full"
alt="" style="vertical-align:top; width: 100%; height: auto; -ko-attr-height: @imageHeight;
-ko-attr-alt: @leftImage.alt" />
</a>
</td>
@ -953,7 +953,7 @@
<td valign="top">
<table cellpadding="0" border="0" align="left" cellspacing="0" class="mobile-full" style="padding-top: 4px;">
<tr>
<td width="auto" valign="middle" bgcolor="#bfbfbf" align="center" height="26"
<td width="auto" valign="middle" bgcolor="#bfbfbf" align="center" height="26"
style="font-size: 13px; font-family: Arial, Helvetica, sans-serif; text-align:center; color: #3f3f3f; font-weight: normal;
padding-left: 18px; padding-right: 18px; background-color: #bfbfbf; border-radius: 4px;
-ko-border-radius: @[buttonStyle.radius]px;
@ -970,15 +970,15 @@
</div><!--[if (gte mso 9)|(lte ie 8)]></td>
<td align="left" valign="top" width="276">
<![endif]--><div style="display:inline-block; max-width:276px; vertical-align:top; width:100%;" class="mobile-full">
<![endif]--><div style="display:inline-block; max-width:276px; vertical-align:top; width:100%;" class="mobile-full">
<table class="vb-content" border="0" cellspacing="9" cellpadding="0" width="276" style="width: 100%" align="right">
<tr data-ko-display="imageVisible">
<td width="100%" valign="top" align="left" class="links-color" style="padding-bottom: 9px">
<a data-ko-link="rightImage.url">
<img data-ko-editable="rightImage.src" border="0" hspace="0" vspace="0" width="258" height="100"
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=258%2C100" class="mobile-full"
alt="" style="vertical-align:top; width: 100%; height: auto; -ko-attr-height: @imageHeight;
src="/editorapi/img?method=placeholder&params=258%2C100" class="mobile-full"
alt="" style="vertical-align:top; width: 100%; height: auto; -ko-attr-height: @imageHeight;
-ko-attr-alt: @rightImage.alt" />
</a>
</td>
@ -1002,7 +1002,7 @@
<td valign="top">
<table cellpadding="0" border="0" align="left" cellspacing="0" class="mobile-full" style="padding-top: 4px;">
<tr>
<td width="auto" valign="middle" bgcolor="#bfbfbf" align="center" height="26"
<td width="auto" valign="middle" bgcolor="#bfbfbf" align="center" height="26"
style="font-size: 13px; font-family: Arial, Helvetica, sans-serif; text-align:center; color: #3f3f3f; font-weight: normal;
padding-left: 18px; padding-right: 18px; background-color: #bfbfbf; border-radius: 4px;
-ko-border-radius: @[buttonStyle.radius]px;
@ -1079,7 +1079,7 @@
<table cellpadding="0" border="0" align="center" cellspacing="0" class="mobile-full">
<tr>
<td width="auto" valign="middle" bgcolor="#bfbfbf" align="center" height="50"
<td width="auto" valign="middle" bgcolor="#bfbfbf" align="center" height="50"
style="font-size:22px; font-family: Arial, Helvetica, sans-serif; color: #3f3f3f; font-weight: normal;
padding-left: 14px; padding-right: 14px; background-color: #bfbfbf; border-radius: 4px;
-ko-attr-bgcolor: @bigButtonStyle.buttonColor; -ko-background-color: @bigButtonStyle.buttonColor;
@ -1115,7 +1115,7 @@
<td valign="top" align="center">
<a data-ko-link="image.url" href="" style="text-decoration: none;"><img data-ko-editable="image.src"
hspace="0" border="0" vspace="0" width="570" data-ko-placeholder-height="200"
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=570%2C200" class="mobile-full"
src="/editorapi/img?method=placeholder&params=570%2C200" class="mobile-full"
alt="" style="max-width: 570px; display: block; border-radius: 0px; width: 100%; height: auto; font-size: 13px;
font-family: Arial, Helvetica, sans-serif; color: #3f3f3f; -ko-font-size: @[longTextStyle.size]px;
-ko-font-family: @longTextStyle.face; -ko-color: @longTextStyle.color; -ko-attr-alt: @image.alt;" /></a>
@ -1128,7 +1128,7 @@
<td valign="top" align="center">
<a data-ko-link="image.url" href="" style="text-decoration: none;"><img data-ko-editable="image.src"
hspace="0" border="0" vspace="0" width="534" data-ko-placeholder-height="280"
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=534%2C280" class="mobile-full"
src="/editorapi/img?method=placeholder&params=534%2C280" class="mobile-full"
alt="" style="max-width: 534px; display: block; border-radius: 0px; width: 100%; height: auto; font-size: 13px;
font-family: Arial, Helvetica, sans-serif; color: #3f3f3f; -ko-font-size: @[longTextStyle.size]px;
-ko-font-family: @longTextStyle.face; -ko-color: @longTextStyle.color; -ko-attr-alt: @image.alt;" /></a>
@ -1156,20 +1156,20 @@
<td valign="top" align="center" class="mobile-row" style="font-size: 0">
<!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="570"><tr><![endif]-->
<!--[if (gte mso 9)|(lte ie 8)]><td align="left" valign="top" width="285"><![endif]-->
<div style="display:inline-block; max-width:285px; vertical-align:top; width:100%; width:100%; " class="mobile-full">
<!--[if (gte mso 9)|(lte ie 8)]><td align="left" valign="top" width="285"><![endif]-->
<div style="display:inline-block; max-width:285px; vertical-align:top; width:100%; width:100%; " class="mobile-full">
<a data-ko-link="leftImage.url" href="" style="text-decoration: none;"><img data-ko-editable="leftImage.src"
hspace="0" align="left" border="0" vspace="0" width="285" height="180" class="mobile-full"
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=285%2C180"
src="/editorapi/img?method=placeholder&params=285%2C180"
alt="" style="display: block; border-radius: 0px; width: 100%; height: auto;font-size: 13px;
font-family: Arial, Helvetica, sans-serif; color: #3f3f3f; -ko-font-size: @[longTextStyle.size]px; -ko-font-family: @longTextStyle.face;
-ko-color: @longTextStyle.color; -ko-attr-height: @imageHeight; -ko-attr-alt: @leftImage.alt;" /></a>
</div><!--[if (gte mso 9)|(lte ie 8)]></td>
<td align="left" valign="top" width="285">
<![endif]--><div style="display:inline-block; max-width:285px; vertical-align:top; width:100%; width:100%; " class="mobile-full">
<![endif]--><div style="display:inline-block; max-width:285px; vertical-align:top; width:100%; width:100%; " class="mobile-full">
<a data-ko-link="rightImage.url" href="" style="text-decoration: none;"><img data-ko-editable="rightImage.src"
hspace="0" align="right" border="0" vspace="0" width="285" height="180" class="mobile-full"
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=285%2C180"
src="/editorapi/img?method=placeholder&params=285%2C180"
alt="" style="display: block; border-radius: 0px; width: 100%; height: auto;font-size: 13px;
font-family: Arial, Helvetica, sans-serif; color: #3f3f3f; -ko-font-size: @[longTextStyle.size]px; -ko-font-family: @longTextStyle.face;
-ko-color: @longTextStyle.color; -ko-attr-height: @imageHeight; -ko-attr-alt: @rightImage.alt;" /></a>
@ -1179,14 +1179,14 @@
</td>
</tr>
</table>
<table data-ko-display="gutterVisible" width="570" class="vb-row fullpad" border="0" cellpadding="0" cellspacing="9" bgcolor="#ffffff"
<table data-ko-display="gutterVisible" width="570" class="vb-row fullpad" border="0" cellpadding="0" cellspacing="9" bgcolor="#ffffff"
style="width: 100%; max-width: 570px; background-color: #ffffff; -ko-attr-bgcolor: @backgroundColor; -ko-background-color: @backgroundColor; display: none;">
<tr>
<td align="center" valign="top" bgcolor="#ffffff" style="background-color: #ffffff; -ko-attr-bgcolor: @backgroundColor; -ko-background-color: @backgroundColor; font-size: 0">
<!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="552"><tr><![endif]-->
<!--[if (gte mso 9)|(lte ie 8)]><td align="left" valign="top" width="276"><![endif]-->
<div style="display:inline-block; max-width:276px; vertical-align:top; width:100%;" class="mobile-full">
<!--[if (gte mso 9)|(lte ie 8)]><td align="left" valign="top" width="276"><![endif]-->
<div style="display:inline-block; max-width:276px; vertical-align:top; width:100%;" class="mobile-full">
<table class="vb-content" width="276" style="width: 100%" border="0" cellpadding="0" cellspacing="9" align="left">
<tr>
@ -1194,7 +1194,7 @@
<a data-ko-link="leftImage.url" href="" style="text-decoration: none;">
<img data-ko-editable="leftImage.src"
hspace="0" align="left" border="0" vspace="0" width="258" height="180"
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=258%2C180" class="mobile-full"
src="/editorapi/img?method=placeholder&params=258%2C180" class="mobile-full"
alt="" style="display: block; border-radius: 0px; width: 100%; height: auto;font-size: 13px;
font-family: Arial, Helvetica, sans-serif; color: #3f3f3f; -ko-font-size: @[longTextStyle.size]px; -ko-font-family: @longTextStyle.face;
-ko-color: @longTextStyle.color; -ko-attr-height: @imageHeight; -ko-attr-alt: @leftImage.alt;" /></a>
@ -1204,14 +1204,14 @@
</div><!--[if (gte mso 9)|(lte ie 8)]></td>
<td align="left" valign="top" width="276">
<![endif]--><div style="display:inline-block; max-width:276px; vertical-align:top; width:100%;" class="mobile-full">
<![endif]--><div style="display:inline-block; max-width:276px; vertical-align:top; width:100%;" class="mobile-full">
<table class="vb-content" width="276" style="width: 100%" border="0" cellpadding="0" cellspacing="9" align="right">
<tr>
<td valign="top">
<a data-ko-link="rightImage.url" href="" style="text-decoration: none;"><img data-ko-editable="rightImage.src"
hspace="0" align="right" border="0" vspace="0" width="258" height="180"
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=258%2C180" class="mobile-full"
src="/editorapi/img?method=placeholder&params=258%2C180" class="mobile-full"
alt="" style="display: block; border-radius: 0px; width: 100%; height: auto;font-size: 13px;
font-family: Arial, Helvetica, sans-serif; color: #3f3f3f; -ko-font-size: @[longTextStyle.size]px; -ko-font-family: @longTextStyle.face;
-ko-color: @longTextStyle.color; -ko-attr-height: @imageHeight; -ko-attr-alt: @rightImage.alt;" /></a>
@ -1246,29 +1246,29 @@
<td valign="top" align="center" class="mobile-row" style="font-size: 0">
<!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="570"><tr><![endif]-->
<!--[if (gte mso 9)|(lte ie 8)]><td align="left" valign="top" width="190"><![endif]-->
<div style="display:inline-block; max-width:190px; vertical-align:top; width:100%; " class="mobile-full">
<!--[if (gte mso 9)|(lte ie 8)]><td align="left" valign="top" width="190"><![endif]-->
<div style="display:inline-block; max-width:190px; vertical-align:top; width:100%; " class="mobile-full">
<a data-ko-link="leftImage.url" href="" style="text-decoration: none;"><img data-ko-editable="leftImage.src"
hspace="0" align="left" border="0" vspace="0" width="190" height="160" class="mobile-full"
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=190%2C160"
src="/editorapi/img?method=placeholder&params=190%2C160"
alt="" style="display: block; border-radius: 0px; width: 100%; height: auto;font-size: 13px;
font-family: Arial, Helvetica, sans-serif; color: #3f3f3f; -ko-font-size: @[longTextStyle.size]px; -ko-font-family: @longTextStyle.face;
-ko-color: @longTextStyle.color; -ko-attr-height: @imageHeight; -ko-attr-alt: @leftImage.alt;" /></a>
</div><!--[if (gte mso 9)|(lte ie 8)]></td>
<td align="left" valign="top" width="190">
<![endif]--><div style="display:inline-block; max-width:190px; vertical-align:top; width:100%; " class="mobile-full">
<![endif]--><div style="display:inline-block; max-width:190px; vertical-align:top; width:100%; " class="mobile-full">
<a data-ko-link="middleImage.url" href="" style="text-decoration: none;"><img data-ko-editable="middleImage.src"
hspace="0" align="left" border="0" vspace="0" width="190" height="160" class="mobile-full"
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=190%2C160"
src="/editorapi/img?method=placeholder&params=190%2C160"
alt="" style="display: block; border-radius: 0px; width: 100%; height: auto;font-size: 13px;
font-family: Arial, Helvetica, sans-serif; color: #3f3f3f; -ko-font-size: @[longTextStyle.size]px; -ko-font-family: @longTextStyle.face;
-ko-color: @longTextStyle.color; -ko-attr-height: @imageHeight; -ko-attr-alt: @middleImage.alt;" /></a>
</div><!--[if (gte mso 9)|(lte ie 8)]></td>
<td align="left" valign="top" width="190">
<![endif]--><div style="display:inline-block; max-width:190px; vertical-align:top; width:100%; " class="mobile-full">
<![endif]--><div style="display:inline-block; max-width:190px; vertical-align:top; width:100%; " class="mobile-full">
<a data-ko-link="rightImage.url" href="" style="text-decoration: none;"><img data-ko-editable="rightImage.src"
hspace="0" align="right" border="0" vspace="0" width="190" height="160" class="mobile-full"
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=190%2C160"
src="/editorapi/img?method=placeholder&params=190%2C160"
alt="" style="display: block; border-radius: 0px; width: 100%; height: auto;font-size: 13px;
font-family: Arial, Helvetica, sans-serif; color: #3f3f3f; -ko-font-size: @[longTextStyle.size]px; -ko-font-family: @longTextStyle.face;
-ko-color: @longTextStyle.color; -ko-attr-height: @imageHeight; -ko-attr-alt: @rightImage.alt;" /></a>
@ -1284,15 +1284,15 @@
<td align="center" valign="top" bgcolor="#ffffff" style="font-size: 0; background-color: #ffffff; -ko-attr-bgcolor: @backgroundColor; -ko-background-color: @backgroundColor">
<!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="552"><tr><![endif]-->
<!--[if (gte mso 9)|(lte ie 8)]><td align="left" valign="top" width="184"><![endif]-->
<div style="display:inline-block; max-width:184px; vertical-align:top; width:100%;" class="mobile-full">
<!--[if (gte mso 9)|(lte ie 8)]><td align="left" valign="top" width="184"><![endif]-->
<div style="display:inline-block; max-width:184px; vertical-align:top; width:100%;" class="mobile-full">
<table class="vb-content" width="184" style="width: 100%" border="0" cellpadding="0" cellspacing="9" align="left">
<tr>
<td valign="top">
<a data-ko-link="leftImage.url" href="" style="text-decoration: none;"><img data-ko-editable="leftImage.src"
hspace="0" align="left" border="0" vspace="0" width="166" height="160"
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=166%2C160" class="mobile-full"
src="/editorapi/img?method=placeholder&params=166%2C160" class="mobile-full"
alt="" style="display: block; border-radius: 0px; width: 100%; height: auto;font-size: 13px;
font-family: Arial, Helvetica, sans-serif; color: #3f3f3f; -ko-font-size: @[longTextStyle.size]px; -ko-font-family: @longTextStyle.face;
-ko-color: @longTextStyle.color; -ko-attr-height: @imageHeight; -ko-attr-alt: @leftImage.alt;" /></a>
@ -1302,14 +1302,14 @@
</div><!--[if (gte mso 9)|(lte ie 8)]></td>
<td align="left" valign="top" width="184">
<![endif]--><div style="display:inline-block; max-width:184px; vertical-align:top; width:100%;" class="mobile-full">
<![endif]--><div style="display:inline-block; max-width:184px; vertical-align:top; width:100%;" class="mobile-full">
<table class="vb-content" width="184" style="width: 100%" border="0" cellpadding="0" cellspacing="9" align="left">
<tr>
<td valign="top">
<a data-ko-link="middleImage.url" href="" style="text-decoration: none"><img data-ko-editable="middleImage.src"
hspace="0" align="left" border="0" vspace="0" width="166" height="160"
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=166%2C160" class="mobile-full"
src="/editorapi/img?method=placeholder&params=166%2C160" class="mobile-full"
alt="" style="display: block; border-radius: 0px; width: 100%; height: auto;font-size: 13px;
font-family: Arial, Helvetica, sans-serif; color: #3f3f3f; -ko-font-size: @[longTextStyle.size]px; -ko-font-family: @longTextStyle.face;
-ko-color: @longTextStyle.color; -ko-attr-height: @imageHeight; -ko-attr-alt: @middleImage.alt;" /></a>
@ -1319,14 +1319,14 @@
</div><!--[if (gte mso 9)|(lte ie 8)]></td>
<td align="left" valign="top" width="184">
<![endif]--><div style="display:inline-block; max-width:184px; vertical-align:top; width:100%;" class="mobile-full">
<![endif]--><div style="display:inline-block; max-width:184px; vertical-align:top; width:100%;" class="mobile-full">
<table class="vb-content" width="184" style="width: 100%" border="0" cellpadding="0" cellspacing="9" align="right">
<tr>
<td valign="top">
<a data-ko-link="rightImage.url" href="" style="text-decoration: none"><img data-ko-editable="rightImage.src"
hspace="0" align="right" border="0" vspace="0" width="166" height="160"
src="http://mosaico.io/srv/f-default/img?method=placeholder&amp;params=166%2C160" class="mobile-full"
src="/editorapi/img?method=placeholder&params=166%2C160" class="mobile-full"
alt="" style="display: block; border-radius: 0px; width: 100%; height: auto;font-size: 13px;
font-family: Arial, Helvetica, sans-serif; color: #3f3f3f; -ko-font-size: @[longTextStyle.size]px; -ko-font-family: @longTextStyle.face;
-ko-color: @longTextStyle.color; -ko-attr-height: @imageHeight; -ko-attr-alt: @rightImage.alt;" /></a>
@ -1372,8 +1372,8 @@
<td valign="top" align="center" style="font-size: 0;">
<!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="552"><tr><![endif]-->
<!--[if (gte mso 9)|(lte ie 8)]><td align="left" valign="top" width="276"><![endif]-->
<div style="display:inline-block; max-width:276px; vertical-align:top; width:100%;" class="mobile-full">
<!--[if (gte mso 9)|(lte ie 8)]><td align="left" valign="top" width="276"><![endif]-->
<div style="display:inline-block; max-width:276px; vertical-align:top; width:100%;" class="mobile-full">
<table class="vb-content" border="0" cellspacing="9" cellpadding="0" width="276" style="width: 100%" align="left">
<tr>
@ -1388,85 +1388,85 @@
</div><!--[if (gte mso 9)|(lte ie 8)]></td>
<td align="left" valign="top" width="276">
<![endif]--><div style="display:inline-block; max-width:276px; vertical-align:top; width:100%;" class="mobile-full">
<![endif]--><div style="display:inline-block; max-width:276px; vertical-align:top; width:100%;" class="mobile-full">
<table class="vb-content" border="0" cellspacing="9" cellpadding="0" width="276" style="width: 100%" align="right">
<tr>
<td align="right" valign="middle" class="links-color socialLinks mobile-textcenter" data-ko-display="socialIconType eq 'colors'">
<span data-ko-display="fbVisible" data-ko-wrap="false">&nbsp;</span>
<a data-ko-display="fbVisible" href="" style="-ko-attr-href: @fbUrl">
<img src="img/social_def/facebook_ok.png" alt="Facebook" border="0" class="socialIcon" />
<img src="/mosaico/templates/versafix-1/img/social_def/facebook_ok.png" alt="Facebook" border="0" class="socialIcon" />
</a>
<span data-ko-display="twVisible" data-ko-wrap="false">&nbsp;</span>
<a data-ko-display="twVisible" href="" style="-ko-attr-href: @twUrl">
<img src="img/social_def/twitter_ok.png" alt="Twitter" border="0" class="socialIcon" />
<img src="/mosaico/templates/versafix-1/img/social_def/twitter_ok.png" alt="Twitter" border="0" class="socialIcon" />
</a>
<span data-ko-display="ggVisible" data-ko-wrap="false">&nbsp;</span>
<a data-ko-display="ggVisible" href="" style="-ko-attr-href: @ggUrl">
<img src="img/social_def/google+_ok.png" alt="Google+" border="0" class="socialIcon" />
<img src="/mosaico/templates/versafix-1/img/social_def/google+_ok.png" alt="Google+" border="0" class="socialIcon" />
</a>
<span data-ko-display="webVisible" data-ko-wrap="false" style="display: none">&nbsp;</span>
<a data-ko-display="webVisible" href="" style="-ko-attr-href: @webUrl; display: none">
<img src="img/social_def/web_ok.png" alt="Web" border="0" class="socialIcon" />
<img src="/mosaico/templates/versafix-1/img/social_def/web_ok.png" alt="Web" border="0" class="socialIcon" />
</a>
<span data-ko-display="inVisible" data-ko-wrap="false" style="display: none">&nbsp;</span>
<a data-ko-display="inVisible" href="" style="-ko-attr-href: @inUrl; display: none">
<img src="img/social_def/linkedin_ok.png" alt="Linkedin" border="0" class="socialIcon" />
<img src="/mosaico/templates/versafix-1/img/social_def/linkedin_ok.png" alt="Linkedin" border="0" class="socialIcon" />
</a>
<span data-ko-display="flVisible" data-ko-wrap="false" style="display: none">&nbsp;</span>
<a data-ko-display="flVisible" href="" style="-ko-attr-href: @flUrl; display: none">
<img src="img/social_def/flickr_ok.png" alt="Flickr" border="0" class="socialIcon" />
<img src="/mosaico/templates/versafix-1/img/social_def/flickr_ok.png" alt="Flickr" border="0" class="socialIcon" />
</a>
<span data-ko-display="viVisible" data-ko-wrap="false" style="display: none">&nbsp;</span>
<a data-ko-display="viVisible" href="" style="-ko-attr-href: @viUrl; display: none">
<img src="img/social_def/vimeo_ok.png" alt="Vimeo" border="0" class="socialIcon" />
<img src="/mosaico/templates/versafix-1/img/social_def/vimeo_ok.png" alt="Vimeo" border="0" class="socialIcon" />
</a>
<span data-ko-display="instVisible" data-ko-wrap="false" style="display: none">&nbsp;</span>
<a data-ko-display="instVisible" href="" style="-ko-attr-href: @instUrl; display: none">
<img src="img/social_def/instagram_ok.png" alt="Instagram" border="0" class="socialIcon" />
<img src="/mosaico/templates/versafix-1/img/social_def/instagram_ok.png" alt="Instagram" border="0" class="socialIcon" />
</a>
<span data-ko-display="youVisible" data-ko-wrap="false" style="display: none">&nbsp;</span>
<a data-ko-display="youVisible" href="" style="-ko-attr-href: @youUrl; display: none">
<img src="img/social_def/youtube_ok.png" alt="Youtube" border="0" class="socialIcon" />
<img src="/mosaico/templates/versafix-1/img/social_def/youtube_ok.png" alt="Youtube" border="0" class="socialIcon" />
</a>
</td>
<td align="right" valign="middle" class="links-color socialLinks mobile-textcenter" data-ko-display="socialIconType eq 'bw'"
style="display: none">
<span data-ko-display="fbVisible" data-ko-wrap="false">&nbsp;</span>
<a data-ko-display="fbVisible" href="" style="-ko-attr-href: @fbUrl">
<img src="img/social_def/facebook_bw_ok.png" alt="Facebook" border="0" class="socialIcon" />
<img src="/mosaico/templates/versafix-1/img/social_def/facebook_bw_ok.png" alt="Facebook" border="0" class="socialIcon" />
</a>
<span data-ko-display="twVisible" data-ko-wrap="false">&nbsp;</span>
<a data-ko-display="twVisible" href="" style="-ko-attr-href: @twUrl">
<img src="img/social_def/twitter_bw_ok.png" alt="Twitter" border="0" class="socialIcon" />
<img src="/mosaico/templates/versafix-1/img/social_def/twitter_bw_ok.png" alt="Twitter" border="0" class="socialIcon" />
</a>
<span data-ko-display="ggVisible" data-ko-wrap="false">&nbsp;</span>
<a data-ko-display="ggVisible" href="" style="-ko-attr-href: @ggUrl">
<img src="img/social_def/google+_bw_ok.png" alt="Google+" border="0" class="socialIcon" />
<img src="/mosaico/templates/versafix-1/img/social_def/google+_bw_ok.png" alt="Google+" border="0" class="socialIcon" />
</a>
<span data-ko-display="webVisible" data-ko-wrap="false" style="display: none">&nbsp;</span>
<a data-ko-display="webVisible" href="" style="-ko-attr-href: @webUrl; display: none">
<img src="img/social_def/web_bw_ok.png" alt="Web" border="0" class="socialIcon" />
<img src="/mosaico/templates/versafix-1/img/social_def/web_bw_ok.png" alt="Web" border="0" class="socialIcon" />
</a>
<span data-ko-display="inVisible" data-ko-wrap="false" style="display: none">&nbsp;</span>
<a data-ko-display="inVisible" href="" style="-ko-attr-href: @inUrl; display: none">
<img src="img/social_def/linkedin_bw_ok.png" alt="Linkedin" border="0" class="socialIcon" />
<img src="/mosaico/templates/versafix-1/img/social_def/linkedin_bw_ok.png" alt="Linkedin" border="0" class="socialIcon" />
</a>
<span data-ko-display="flVisible" data-ko-wrap="false" style="display: none">&nbsp;</span>
<a data-ko-display="flVisible" href="" style="-ko-attr-href: @flUrl; display: none">
<img src="img/social_def/flickr_bw_ok.png" alt="Flickr" border="0" class="socialIcon" />
<img src="/mosaico/templates/versafix-1/img/social_def/flickr_bw_ok.png" alt="Flickr" border="0" class="socialIcon" />
</a>
<span data-ko-display="viVisible" data-ko-wrap="false" style="display: none">&nbsp;</span>
<a data-ko-display="viVisible" href="" style="-ko-attr-href: @viUrl; display: none">
<img src="img/social_def/vimeo_bw_ok.png" alt="Vimeo" border="0" class="socialIcon" />
<img src="/mosaico/templates/versafix-1/img/social_def/vimeo_bw_ok.png" alt="Vimeo" border="0" class="socialIcon" />
</a>
<span data-ko-display="instVisible" data-ko-wrap="false" style="display: none">&nbsp;</span>
<a data-ko-display="instVisible" href="" style="-ko-attr-href: @instUrl; display: none">
<img src="img/social_def/instagram_bw_ok.png" alt="Instagram" border="0" class="socialIcon" />
<img src="/mosaico/templates/versafix-1/img/social_def/instagram_bw_ok.png" alt="Instagram" border="0" class="socialIcon" />
</a>
<span data-ko-display="youVisible" data-ko-wrap="false" style="display: none">&nbsp;</span>
<a data-ko-display="youVisible" href="" style="-ko-attr-href: @youUrl; display: none">
<img src="img/social_def/youtube_bw_ok.png" alt="Youtube" border="0" class="socialIcon" />
<img src="/mosaico/templates/versafix-1/img/social_def/youtube_bw_ok.png" alt="Youtube" border="0" class="socialIcon" />
</a>
</td>
</tr>
@ -1485,7 +1485,7 @@
</tr>
</table>
<!-- /socialBlock -->
</div>
<!-- footerBlock -->
@ -1499,23 +1499,23 @@
<div class="oldwebkit">
<table width="570" style="width: 100%; max-width: 570px" border="0" cellpadding="0" cellspacing="9" class="vb-container halfpad" align="center">
<tr>
<td data-ko-editable="longText" class="long-text links-color"
<td data-ko-editable="longText" class="long-text links-color"
style="text-align:center; font-size: 13px;color: #919191; font-weight: normal; text-align:center; font-family: Arial, Helvetica, sans-serif;
-ko-font-size: @[longTextStyle.size]px; -ko-color: @longTextStyle.color; -ko-font-family: @longTextStyle.face"><p>Email sent to <a href="mailto:[mail]">[mail]</a></p></td>
-ko-font-size: @[longTextStyle.size]px; -ko-color: @longTextStyle.color; -ko-font-family: @longTextStyle.face"><p>Email sent to <a href="mailto:[EMAIL]">[EMAIL]</a></p></td>
</tr>
<tr>
<td style="text-align: center;">
<a style="text-decoration: underline; color: #ffffff; text-align: center; font-size: 13px;
<a style="text-decoration: underline; color: #ffffff; text-align: center; font-size: 13px;
font-weight: normal; font-family: Arial, Helvetica, sans-serif;
-ko-text-decoration: @linkStyle.decoration; -ko-color: @[Color.readability(linkStyle.color, backgroundColor) gt 2 ? linkStyle.color : (Color.isReadable('#ffffff', backgroundColor) ? '#ffffff' : '#000000')]; -ko-font-size: @[linkStyle.size]px; -ko-font-family: @linkStyle.face"
href="[unsubscribe_link]"><span data-ko-editable="disiscrivitiText">Unsubscribe</span></a>
href="[LINK_UNSUBSCRIBE]"><span data-ko-editable="disiscrivitiText">Unsubscribe</span></a>
</td>
</tr>
<tr data-ko-display="_root_.sponsor.visible" style="display: none;text-align:center">
<td align="center">
<a href="" style="-ko-attr-href: @_root_.sponsor.url;"><img border="0" hspace="0" vspace="0" src="img/sponsor.gif" alt="sponsor"
style="Margin:auto;display:inline !important; -ko-attr-src: @_root_.sponsor.src; -ko-attr-alt: @_root_.sponsor.alt" /></a>
<a href="http://www.void.it" target="_blank" rel="noreferrer"><img border="0" hspace="0" vspace="0" src="/mosaico/templates/versafix-1/img/sponsor.gif" alt="sponsor"
style="Margin:auto;display:inline !important;" /></a>
</td>
</tr>
</table>
@ -1528,4 +1528,4 @@
</center>
</body>
</html>
</html>