Email template for WP E-Commerce Shop Styling

/* Mobile-specific Styles */

@media only screen and (max-device-width: 480px) {

table[class=w15], td[class=w15], img[class=w15] { width:5px !important; }

table[class=w30], td[class=w30], img[class=w30] { width:10px !important; }

table[class=w640], td[class=w640], img[class=w640] { width:300px !important; }

p[class=footer-content-left] { text-align: center !important; }

#headline p { font-size: 30px !important; }

.article-content, #left-sidebar{ -webkit-text-size-adjust: 90% !important; -ms-text-size-adjust: 90% !important; }

.header-content, .footer-content-left {-webkit-text-size-adjust: 80% !important; -ms-text-size-adjust: 80% !important;}

img { height: auto; line-height: 100%;}

}

/* Client-specific Styles */

#outlook a { padding: 0; }      /* Force Outlook to provide a 'view in browser' button. */

body { width: 100% !important; }

.ReadMsgBody { width: 100%; }

.ExternalClass { width: 100%; display:block !important; } /* Force Hotmail to display emails at full width */

/* Reset Styles */

/* Add 100px so mobile switch bar doesn't cover street address. */

body { background-color: #dedede; margin: 0; padding: 0; }

img { outline: none; text-decoration: none; display: block;}

br, strong br, b br, em br, i br { line-height:100%; }

h1, h2, h3, h4, h5, h6 { line-height: 100% !important; -webkit-font-smoothing: antialiased; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: blue !important; }

h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active { color: red !important; }

/* Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure. */

h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: purple !important; }

/* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */

table td, table tr { border-collapse: collapse; }

.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {

color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;

}       /* Body text color for the New Yahoo.  This example sets the font of Yahoo's Shortcuts to black. */

/* This most probably won't work in all email clients. Don't include <code _tmplitem='269' > blocks in email. */

code {

white-space: normal;

word-break: break-all;

}

#background-table { background-color: #dedede; }

/* Webkit Elements */

#top-bar { border-radius:6px 6px 0px 0px; -moz-border-radius: 6px 6px 0px 0px; -webkit-border-radius:6px 6px 0px 0px; -webkit-font-smoothing: antialiased; background-color: #c7c7c7; color: #ededed; }

#top-bar a { font-weight: bold; color: #ffffff; text-decoration: none;}

#footer { border-radius:0px 0px 6px 6px; -moz-border-radius: 0px 0px 6px 6px; -webkit-border-radius:0px 0px 6px 6px; -webkit-font-smoothing: antialiased; }

/* Fonts and Content */

body, td { font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; }

.header-content, .footer-content-left, .footer-content-right { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }

/* Prevent Webkit and Windows Mobile platforms from changing default font sizes on header and footer. */

.header-content { font-size: 12px; color: #ededed; }

.header-content a { font-weight: bold; color: #ffffff; text-decoration: none; }

#headline p { color: #444444; font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; font-size: 36px; text-align: center; margin-top:0px; margin-bottom:30px; }

#headline p a { color: #444444; text-decoration: none; }

.article-title { font-size: 18px; line-height:24px; color: #b0b0b0; font-weight:bold; margin-top:0px; margin-bottom:18px; font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; }

 

.footer-content-left { font-size: 12px; line-height: 15px; color: #ededed; margin-top: 0px; margin-bottom: 15px; }

.footer-content-left a { color: #ffffff; font-weight: bold; text-decoration: none; }

.footer-content-right { font-size: 11px; line-height: 16px; color: #ededed; margin-top: 0px; margin-bottom: 15px; }

.footer-content-right a { color: #ffffff; font-weight: bold; text-decoration: none; }

#footer { background-color: #c7c7c7; color: #ededed; }

#footer a { color: #ffffff; text-decoration: none; font-weight: bold; }

 

#products-table{

 width:100%;

 border-collapse:collapse;

 padding-bottom:1px;

 border-bottom:1px solid #606060;

 }

 #products-table th{

 text-align:right;

 border-bottom:2px solid #606060!important;

 }

 #products-table td{

 text-align:right;

 border-bottom:1px solid #606060;

 padding:0 3px;

 }

 #products-table .product_name{

 text-align:left;

 }</style>

 

 

 

 

 

 

{#mailcontent#}

 

<p class='footer-content-left' align='left'>YOUR SITE<br/><a href="mailto:web@yourdomain.com">web@yourdomain.com</a></p>