Am I missing something? Responsive email is misbehaving...

I have read the Responsive email guides but believe I must be missing something!

My email doesnt behave in the more popular email clients- Hotmail, Gmail, Me/iCloud and Outlook (i'm less bothered about this one however)

Can someone kindly point me in the right direction as I'm so pleased that I've created this but its near enough about to drive me crazy because the end is so near!!

I'd really appreciate the guidance. Code is below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;">
  <head>
    <meta content="width=device-width" name="viewport" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Crystal Ski</title>
      
  <style type="text/css">


/* CSS for hiding content in desktop/webmail clients */
.hide img { background-image: http://www.crystalski.co.uk/emails/Template2013/images/hero_image_template.jpg;
max-height: 0px; font-size: 0; display: block;   }

  
  
  
/*Client specific styles*/

<!---------------------------------------YAHOO-------------------------------------->

/*  attribute selectors for YAHOO mail to prevent YAHOO displaying mobile version */  
@media screen and (max-width:768px) {
    *[class=menu] li { 
      width: 25 !important; 
      margin-bottom:5px !important;
          } 
    }
    
    @media screen and (max-width: 480px) {
    *[class=menu] li {    
    position: static !important;
    width: 100% !important;
    margin-bottom:5px !important;
    }
    *[class=menu] li a {
    border: none !important;
    }
    *[class=menu].end {
    position: static !important;
    width: 100% !important;
    }
    /* Media query for displaying content in mobile email clients */
    .hide { max-height: none !important; 
    font-size: 12px !important; 
    display: block !important; }
    
    
    }
        
<!---------------------------------------HOTMAIL-------------------------------------->

   .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */ 
   .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, 
   .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing.  */

/** Hotmail header color reset: Hotmail replaces your header color styles with a green color on H2, H3, H4, H5, and H6 tags. In this example, the color is reset to black for a non-linked header, blue for a linked header, red for an active header (limited support), and purple for a visited header (limited support).  Replace with your choice of color. The !important is really what is overriding Hotmail's styling. Hotmail also sets the H1 and H2 tags to the same size.**/
h1, h2, h3, h4, h5, h6 {color: #1b3180 !important;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: #1b3180 !important;}
 
h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {
color: #1b3180 !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: #1b3180 !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. */
}

<!---------------------------------------OUTLOOK-------------------------------------->

#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}    
   
</style>
    
  </head>
  <body bgcolor="#ECECEC" style="margin: 0; -webkit-text-size-adjust: none; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0; height: 100%; -webkit-font-smoothing: antialiased; width: 100% !important;">

    <!-- HEADER -->

    <table style="margin: 0; background-color: #FFFFFF; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100%;" width="100%" bgcolor="#FFFFFF"><tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"><td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"></td>

            <td style="max-width: 640px !important; clear: both !important; margin: 0 auto; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; display: block !important;">
                <div style="max-width: 600px; margin: 0 auto; padding: 15px; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; display: block;">
                    <table style="margin: 0; background-color: #FFFFFF; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100%;" bgcolor="#FFFFFF"><tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"><td style="font-weight: 600; font-size: 12px; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; color: #CCC; padding: 0 50px 10px 0;"><a href="http://www.crystalski.co.uk/contact-us/" target="_blank" style="text-decoration:none; font-weight: 600; font-size: 12px; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; color: #CCC;"> Ask a question</a></td>

<td align="right" style="font-weight: 600; font-size: 12px; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; color: #CCC; 
"><a href="http://www.ski-buzz.co.uk/" target="_blank" style="text-decoration:none; font-weight: 600; font-size: 12px; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; color: #CCC;">Read our blog</a></td>
                        </tr><tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0; display:block;"><td colspan="2" style="font-size: 12px; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; color: #CCC; padding: 0 0 10px;">
                                <div style="position: static !important; margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0; list-style-type: none !important; width: 220px; float: right !important;"> <!--social icons in header-->
                                    <div style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 10px; height: 24px; width: 24px; float: left;"><a href="http://www.facebook.com/crystalski" target="_blank"><img alt="Facebook Icon" src="http://www.crystalski.co.uk/emails/Template2013/images/FB.png" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;" /></a></div>

                                    <div style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 10px; height: 24px; width: 24px; float: left;"><a href="http://twitter.com/#!/crystalski" target="_blank"><img alt="Twitter Icon" src="http://www.crystalski.co.uk/emails/Template2013/images/twit.png" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;" /></a></div>

                                    <div style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 10px; height: 24px; width: 24px; float: left;"><a href="http://www.youtube.com/crystalholidays" target="_blank"><img alt="Youtube Icon" src="http://www.crystalski.co.uk/emails/Template2013/images/youtube.png" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;" /></a></div>

                                    <div style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 10px; height: 24px; width: 24px; float: left;"><a href="http://www.flickr.com/photos/crystalski" target="_blank"><img alt="Flickr Icon" src="http://www.crystalski.co.uk/emails/Template2013/images/flickr.png" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;" /></a></div>

                                    <div style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 10px 0 10px 10px; height: 24px; width: 24px; float: left;"><a href="https://plus.google.com/110372086248761176451" target="_blank"><img alt="Google+ Icon" src="http://www.crystalski.co.uk/emails/Template2013/images/gplus.png" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;" /></a></div>
                                </div>
                            </td>
                        </tr></table></div>
            </td>

            <td style="max-width: 640px !important; clear: both !important; margin: 0 auto; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; display: block !important;">
                <div style="max-width: 600px; margin: 0 auto; padding: 15px; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; display: block;">
                    <table style="margin: 0; background-color: #FFFFFF; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100%;" bgcolor="#FFFFFF"><tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"><td height="10" style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0 10px 0 0;"> 
                            </td>

                            <td align="right" rowspan="5" style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/atol.jpg" alt="atol logo" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>
                        </tr><tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"><td height="42" style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0 10px 0 0;">
                            <img src="http://www.crystalski.co.uk/emails/Template2013/images/Crystalskisnowboardlrg.png" alt="Crystal logo" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>
                        </tr><tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"><td style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; color: #CCCCCC; margin: 0; padding: 0;">The UK's number 1 for
                            ski holidays</td>
                        </tr></table><table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0; width: 100%;"></table></div>
            </td>

            <td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"></td>
        </tr></table><!-- HEADER -->
        
 <!-- BODY --><table style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0; width: 100%;"><tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"><td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"></td>

            <td class="container" style="max-width: 640px !important; clear: both !important; margin: 0 auto; background-color: #FFFFFF; font-family: Verdana, Geneva, sans-serif; padding: 0; display: block !important;" bgcolor="#FFFFFF">
            
            
                <!------------------------------------- 
                                        NAVIGATION 
                 ---------------------------------------> 
                                    
                                    
                                    
             <div style="padding:15px; max-width:600px; margin:0 auto; display:block; ">
               <ul class="menu" style="font-weight: normal; font-size: 14px; margin: 0; background-color: #FFFFFF; padding: 0; border: none; line-height: 1.6; outline: none; font-family: Verdana, Geneva, sans-serif; text-decoration: none; width: 100%;">
                    
                        
<li style="list-style: none; float: left; width: 25%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;"> <a href="http://www.crystalski.co.uk/ski-resorts/austria-ski-holidays/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: none; color: #696969; font-family: Verdana, Geneva, sans-serif;">Austria</a></li>

<li style="list-style: none; float: left; width: 25%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;"> <a href="http://www.crystalski.co.uk/ski-resorts/france-ski-holidays/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: 1px solid #acacac; color: #696969; font-family: Verdana, Geneva, sans-serif;">France</a></li>

<li style="list-style: none; float: left; width: 25%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;"> <a href="http://www.crystalski.co.uk/ski-resorts/italy-ski-holidays/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: 1px solid #acacac; color: #696969; font-family: Verdana, Geneva, sans-serif;">Italy</a></li>
                       
                       
<li style="list-style: none; float: left; width: 25%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;"> <a href="http://www.crystalski.co.uk/ski-resorts/switzerland-ski-holidays/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: 1px solid #acacac; color: #696969; font-family: Verdana, Geneva, sans-serif;">Switzerland</a></li>

<li style="list-style: none; float: left; width: 25%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;"> <a href="http://www.crystalski.co.uk/ski-resorts/canada-ski-holidays/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: none; color: #696969; font-family: Verdana, Geneva, sans-serif;">Canada</a></li>

<li style="list-style: none; float: left; width: 25%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;"> <a href="http://www.crystalski.co.uk/ski-resorts/usa-ski-holidays/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: 1px solid #acacac; color: #696969; font-family: Verdana, Geneva, sans-serif;">USA</a></li>

<li class="end" style=" list-style: none; float: left; width: 50%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;" > <a href="http://www.crystalski.co.uk/ski-resorts/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: 1px solid #acacac; color: #696969; font-family: Verdana, Geneva, sans-serif;">All Ski Destinations</a></li>
                      </ul>
                    
                    
                    <table style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0; width: 100%;"><tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"><td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;">
                              
                                <br />
                                
 <!-- Hero image --><p style="margin: 0 0 10px; padding: 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/hero_image.jpg" alt="skiing in 2013" style="max-width: 100%; margin: 0; padding: 0; width: 100% !important;" class="hide" /></p><!-- Hero image -->


                         <!-- Blue seperator --> <p style="font-weight: normal; font-size: 14px; margin: xddddpx 0 10px; padding: 0; border-top-color: #1b3281; line-height: 1.6; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border-top-style: solid; border-top-width: 4px;"></p> 
                                
                                
                               <br />
                               
<h1 style="font-weight: bold; font-size: 27px; margin: -20px 0 0; background-color: #ECF8FF; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; color: #1b3180; padding: 15px 15px 0;">Welcome Mr Smith,</h1>
                                <p style="font-weight: normal; font-size: 14px; margin: 0 0 15px; background-color: #ECF8FF; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.6; padding: 15px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
                                
                                <hr style="margin: 0; border-top-color: rgba(0, 0, 0, 0.1); font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border-bottom-style: solid; padding: 0; border-top-style: solid; border-bottom-color: rgba(255, 255, 255, 0.3); border-width: 1px 0; height: 0;" />
                                
                            <!--section separator--><br />
                            
<h3 style="font-size: 22px; font-weight: 900; line-height: 1.1; font-family: 'Helvetica Neue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0 0 15px; color: #0166b1; padding: 0;">Subheader 1</h3>
<p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0 0 15px; padding: 0 15px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>

<table width="100%" style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0; width: 100%;">

<tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;">
<td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;">
                                            <!--- column 1 -->

<table align="center" style="min-width: 279px; margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0; width: 280px; float: left;"><tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"><td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 15px;">
                                                        <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/Sub1.jpg" alt="Delta Whistler Village" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100% !important;" /></p>
                                                    </td>
                                                </tr></table><!-- /column 1 --><!--- column 2 --><table align="left" style="min-width: 279px; margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0; width: 280px; float: left;"><tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"><td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 15px;">
                                                        <h4 style="font-size: 20px; font-weight: 500; line-height: 1.1; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0 0 15px; color: #0166b1; padding: 0;">Delta Whistler
                                                        Village</h4>

                                                        <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">Lorem ipsum dolor
                                                        sit amet, consectetur
                                                        adipisicing elit, sed
                                                        do eiusmod tempor
                                                        incididunt ut labore et
                                                        dolore magna aliqua.
                                                        Duis autem vel eum
                                                        iriure dolor in
                                                        hendrerit
                                                        in</p><a style="-webkit-border-radius: 8px; font-weight: bold; cursor: pointer; margin: 0 0 10px; background-color: #ed1c24; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 0px solid #ed1c24; padding: 10px 16px; text-decoration: none; color: #FFF; display: block !important; text-align: center; background-image: none !important; -moz-border-radius: 8px; border-radius: 8px;">Find out more
                                                        »</a>
                                                    </td>
                                                </tr></table><!-- /column 2 --></td>
                </tr></table><br /><table width="100%" style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0; width: 100%;"><tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"><td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;">
                                            <!--- column 1 -->

                                            <table align="center" style="min-width: 279px; margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0; width: 280px; float: left;"><tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"><td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 15px;">
                                                        <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/Sub1_1.jpg" alt="Delta Whistler Village" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100% !important;" /></p>
                                                    </td>
                                                </tr></table><!-- /column 1 --><!--- column 2 --><table align="left" style="min-width: 279px; margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0; width: 280px; float: left;"><!--<tr bgcolor="#1b3281">
                                            <td>                                
                                                <p style="color:#FFFFFF; font-weight:bold;">Delta Whistler Village, CANADA</p>
                                            </td>
                                      </tr>--><tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"><td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 15px;">
                                                        <h4 style="font-size: 20px; font-weight: 500; line-height: 1.1; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0 0 15px; color: #0166b1; padding: 0;">Delta Whistler
                                                        Village</h4>

                                                        <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">Lorem ipsum dolor
                                                        sit amet, consectetur
                                                        adipisicing elit, sed
                                                        do eiusmod tempor
                                                        incididunt ut labore et
                                                        dolore magna aliqua.
                                                        Duis autem vel eum
                                                        iriure dolor in
                                                        hendrerit
                                                        in</p><a style="-webkit-border-radius: 8px; font-weight: bold; cursor: pointer; margin: 0 0 10px; background-color: #ed1c24; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 0px solid #ed1c24; padding: 10px 16px; text-decoration: none; color: #FFF; display: block !important; text-align: center; background-image: none !important; -moz-border-radius: 8px; border-radius: 8px;">Find out more
                                                        »</a>
                                                    </td>
                                                </tr></table><!-- /column 2 --></td>
                                    </tr></table><p style="font-weight: normal; font-size: 14px; margin: 0 0 15px; background-color: #ECF8FF; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.6; padding: 15px;">Lorem ipsum dolor sit amet,
                                consectetuer adipiscing elit, sed diam nonummy
                                nibh euismod tincidunt ut laoreet dolore magna
                                aliquam erat volutpat. Ut wisi enim ad minim
                                veniam, quis nostrud exerci tation ullamcorper
                                suscipit lobortis nisl ut aliquip ex ea commodo
                                consequat. <a href="www.crystal.co.uk" style="font-weight: bold; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; text-decoration: none; color: #2BA6CB; margin: 0; padding: 0;">Duis
                                autem vel eum iriure dolor in hendrerit in
                                vulputate velit esse molestie consequat,</a>
                                vel illum dolore eu feugiat nulla facilisis at
                                vero eros et accumsan et iusto odio dignissim
                                qui blandit praesent luptatum zzril delenit
                                augue duis dolore te feugait nulla facilisi.
                                Nam liber tempor cum soluta nobis eleifend
                                option congue nihil imperdiet doming id quod
                                mazim placerat facer possim assum.</p>
                                <!-- /Callout Panel -->
                                <br />
                                
<!--section separator--><hr style="margin: 0; border-top-color: rgba(0, 0, 0, 0.1); font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border-bottom-style: solid; padding: 0; border-top-style: solid; border-bottom-color: rgba(255, 255, 255, 0.3); border-width: 1px 0; height: 0;" /><!-- end section separator-->
                                
                                
<br />

<h3 style="font-size: 22px; font-weight: 900; line-height: 1.1; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0 0 15px; color: #0166b1; padding: 0;">Subheader 2</h3>

                                <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpaq ui officia deserunt mollit anim id est laborum.</p><!--double panel-->

<table width="100%" style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0; width: 100%;"><tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"><td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;">

<!--- column 1 -->
<table align="left" width="100%" style="min-width: 279px; margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0; width: 280px; float: left;"><tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"><td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 15px;">
                                                        <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/Sub2.jpg" alt="Another snowy place" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100% !important;" /></p>
                                                    </td>
                                                </tr></table><!-- /column 1 --><!--- column 2 --><table align="left" style="min-width: 279px; margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0; width: 280px; float: left;"><tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"><td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 15px;">
                                                        <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">Lorem ipsum dolor
                                                        sit amet, consectetur
                                                        adipisicing elit, sed
                                                        do eiusmod tempor
                                                        incididunt ut labore et
                                                        dolore magna aliqua.
                                                        Duis autem vel eum
                                                        iriure dolor in
                                                        hendrerit
                                                        in</p><a style="-webkit-border-radius: 8px; font-weight: bold; cursor: pointer; margin: 0 0 10px; background-color: #ed1c24; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 0px solid #ed1c24; padding: 10px 16px; text-decoration: none; color: #FFF; display: block !important; text-align: center; background-image: none !important; -moz-border-radius: 8px; border-radius: 8px;">Click here »</a>
                                                    </td>
                                                </tr></table><!-- /column 2 --></td>
                </tr>
                </table><!-- double panel --><br /><hr style="margin: 0; border-top-color: rgba(0, 0, 0, 0.1); font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border-bottom-style: solid; padding: 0; border-top-style: solid; border-bottom-color: rgba(255, 255, 255, 0.3); border-width: 1px 0; height: 0;" /><!--section separator--><br />
                                    
<h3 style="font-size: 22px; font-weight: 900; line-height: 1.1; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0 0 15px; color: #0166b1; padding: 0;">Subheader 3</h3>


<table style="margin: 0; border-collapse: collapse; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100%;"><tbody style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;">
                                
                                
<!--first row--><tr style="margin: 0; background-color: #eee; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;" bgcolor="#eee"><td width="59%" style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">
<a href="http://www.google.co.uk" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0; text-decoration:none;">Arinsal</a></td>
<td width="15%" style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left"> from</td>
<td width="26%" style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">
<a href="http://www.google.co.uk" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0; text-decoration:none;">£189</a></td>
</tr>  <!-- end first row--> 
                                        
                                        
<!--second row--><tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"><td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">
<a href="http://www.google.co.uk" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0; text-decoration:none;">Flaine</a></td>
<td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">from</td>
<td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">£199</td>
</tr><!--end second row-->
                                        
                                        
<!--third row--><tr style="margin: 0; background-color: #eee; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;" bgcolor="#eee"><td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">
<a href="http://www.google.co.uk" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0; text-decoration:none;">Rauris</a></td>
<td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">from</td>
<td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">£199</td>
</tr><!-- end third row-->
                                        
<!--fourth row--><tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"><td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">
<a href="http://www.google.co.uk" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0; text-decoration:none;">Bankso</a></td>
<td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">from</td>
<td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">£199</td>
</tr><!--end fourth row-->
                                        
                                        
<!--fourth row--><tr style="margin: 0; background-color: #eee; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;" bgcolor="#eee"><td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left"><a href="http://www.google.co.uk" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0; text-decoration:none;">Some other place</a></td>
<td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">from</td>
<td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">£199</td>
</tr><!-- end fourth row-->

    </tbody>
    
                </table>

<br /><br /><hr style="margin: 0; border-top-color: rgba(0, 0, 0, 0.1); font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border-bottom-style: solid; padding: 0; border-top-style: solid; border-bottom-color: rgba(255, 255, 255, 0.3); border-width: 1px 0; height: 0;" /><!--section separator-->

<br />

<h3 style="font-size: 22px; font-weight: 900; line-height: 1.1; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0 0 15px; color: #0166b1; padding: 0;">Subheader 4</h3>

                                <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/wide_img.jpg" alt="Go skiing with a group of mates this summer" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100% !important;" /></p>

                                <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint  occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><a style="-webkit-border-radius: 8px; font-weight: bold; cursor: pointer; margin: 0 0 10px; background-color: #ed1c24; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 0px solid #ed1c24; padding: 10px 16px; text-decoration: none; color: #FFF; display: block !important; text-align: center; background-image: none !important; -moz-border-radius: 8px; border-radius: 8px;">More info
                                »</a><br /><br /><br /><hr style="margin: 0; border-top-color: rgba(0, 0, 0, 0.1); font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border-bottom-style: solid; padding: 0; border-top-style: solid; border-bottom-color: rgba(255, 255, 255, 0.3); border-width: 1px 0; height: 0;" /><!--section separator--><br />
                                
<h3 style="font-size: 22px; font-weight: 900; line-height: 1.1; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0 0 15px; color: #0166b1; padding: 0;">Subheader 5</h3>

                                <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;"><a href="http://www.youtube.com/watch?v=J3MFNMChdUc&amp;feature=share&amp;list=UUzXAsARBfGai5WB_HltVZJw" target="_blank" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/youtube.gif" alt="Crystal Ski say thank you!" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100% !important;" /></a></p>

                                <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">Lorem ipsum dolor sit amet, consectetur
                                adipisicing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua. Ut
                                enim ad minim veniam, quis nostrud exercitation
                                ullamco laboris nisi ut aliquip ex ea commodo
                                consequat. Duis aute irure dolor in
                                reprehenderit in voluptate velit esse cillum
                                dolore eu fugiat nulla pariatur. Excepteur sint
                                occaecat cupidatat non proident, sunt in culpa
                                qui officia deserunt mollit anim id est
                                laborum.</p><a style="-webkit-border-radius: 8px; font-weight: bold; cursor: pointer; margin: 0 0 10px; background-color: #ed1c24; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 0px solid #ed1c24; padding: 10px 16px; text-decoration: none; color: #FFF; display: block !important; text-align: center; background-image: none !important; -moz-border-radius: 8px; border-radius: 8px;">More info
                                »</a><br /><br /><p style="font-size: 14px; font-weight: normal; margin: 0 0 15px; background-color: #2a3563; padding: 15px; line-height: 1.6; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; color: #FFFFFF; text-align: center;" align="center">Visit your nearest ABTA agent
                                or call us on<br /><a href="tel:08712315636" style="font-size: 18px; font-weight: bold; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; padding: 0; text-decoration: none; color: #FFFFFF;">0871 231
                                5636</a><br />
                                Calls cost 10p per minute plus network
                                extras</p>
                            </td>
                        </tr></table></div>
            </td>

            <td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"></td>
        </tr></table><!-- /BODY -->
        

<!-- FOOTER --><table style="clear: both !important; margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100%;">
            <tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;">                <td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"></td>

            <td style="max-width: 640px !important; clear: both !important; margin: 0 auto; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; display: block !important;">
                <!-- content -->

                <div style="max-width: 600px; margin: 0 auto; padding: 15px; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; display: block;">
                    <table style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0; width: 100%;"><tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"><td align="center" style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;">
                                <table width="100%" style="margin: 0; border-collapse: collapse; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100%;"><tr style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"><td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 1px solid #ececec; padding: 6px; text-align: left;" align="left"><img src="http://www.crystalski.co.uk/emails/Template2013/images/snowcentre.jpg" alt="buy our holidays from the snowcentre" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>

                                        <td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 1px solid #ececec; padding: 6px; text-align: left;" align="left"><img src="http://www.crystalski.co.uk/emails/Template2013/images/snozone.jpg" alt="buy our holidays from snozone" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>

                                        <td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 1px solid #ececec; padding: 6px; text-align: left;" align="left"><img src="http://www.crystalski.co.uk/emails/Template2013/images/chillfactor.jpg" alt="buy our holidays from chill factor" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>

                                        <td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 1px solid #ececec; padding: 6px; text-align: left;" align="left"><img src="http://www.crystalski.co.uk/emails/Template2013/images/snowfactor.jpg" alt="buy our holidays from snow factor" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>

                                        <td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; border: 1px solid #ececec; padding: 6px; text-align: left;" align="left"><img src="http://www.crystalski.co.uk/emails/Template2013/images/snowrock.jpg" alt="buy our holidays from snow+rock" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>
                                    </tr></table><br /><br /><p style="font-weight: normal; font-size: 10px; line-height: 1.6; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">All the flights and
                                flight-inclusive holidays in this email are
                                financially protected by the ATOL scheme. When
                                you pay you will be supplied with an ATOL
                                Certificate. Please ask for it and check to
                                ensure that everything you booked (flights,
                                hotels and other services) is listed on it.
                                Please see our booking conditions for further
                                information or for more information about
                                financial protection and the ATOL Certificate
                                go to: www.atol.org.uk/ATOLCertificate. Our
                                ATOL number is ATOL 2524. For package holidays
                                that do not include travel by air we provide
                                security by way of a bond held by ABTA. Our
                                ABTA member number is V5126. If you book
                                arrangements other than a package holiday this
                                financial protection will not apply. Please see
                                our booking conditions for more information.
                                Registered Office: TUI Travel House, Crawley
                                Business Quarter, Fleming Way, Crawley, West
                                Sussex. RH10 9QL. Registered No: 2830117. ABTA
                                No: V5126. VAT No: 233368762. © 2013 Crystal
                                Ski. All rights reserved.</p>

                                <p style="font-weight: normal; font-size: 10px; line-height: 1.6; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;"><a href="#d41d8cd98f00b204e9800998ecf8427e" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0;">Terms and
                                conditions</a> | <a href="#d41d8cd98f00b204e9800998ecf8427e" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0;">Unsubscribe</a></p>
                            </td>
                        </tr></table></div><!-- /content -->
            </td>

            <td style="margin: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; padding: 0;"></td>
        </tr></table><!-- /FOOTER --></body>
</html>

Thanks,

Gray

roshodgekiss roshodgekiss, 3 years ago

Hey there Graycode, thank you for reading the guide! Just to double check, when you say 'misbehaving', do you mean that the media query isn't being triggered in these webmail email clients (ie. Hotmail, Gmail, Me/iCloud and Outlook)?

To clarify, the media query will only get to work in email clients that offer support for them - I don't think any of the mentioned email clients do this. However, Apple Mail, iOS Mail and a host of mobile email clients offer support for responsive email techniques, as do most modern browsers.

I may have made some wrong assumptions here, so please feel free to clarify what's happening - screenshots are always helpful for this.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Graycode, 3 years ago
roshodgekiss :

Hey there Graycode, thank you for reading the guide! Just to double check, when you say 'misbehaving', do you mean that the media query isn't being triggered in these webmail email clients (ie. Hotmail, Gmail, Me/iCloud and Outlook)?

To clarify, the media query will only get to work in email clients that offer support for them - I don't think any of the mentioned email clients do this. However, Apple Mail, iOS Mail and a host of mobile email clients offer support for responsive email techniques, as do most modern browsers.

I may have made some wrong assumptions here, so please feel free to clarify what's happening - screenshots are always helpful for this.

Hiya, Sorry I should have been clearer!

I mean that in Gmail its pulling the mobile version of the navigation (http://i46.tinypic.com/2a9s700.png), in Hotmail it's also using the mobile styles and has changed the colour of the navigation ( http://i45.tinypic.com/16jm38.png & http://i48.tinypic.com/ehyzno.png but i believe I have found the correct code to override this), in icloud.com (desktop version) it doesnt scroll down the page at all which is so very strange, and Outlook has a variety of misaligned, link underlines, list styles and mobile styles! I know the latter is the most problematic but i'd like to try and find a happy medium. http://i50.tinypic.com/24yn4ba.png & http://i47.tinypic.com/r739m8.png

This is what its meant to look like! http://i45.tinypic.com/312twmc.png

I hope the links have helped as I'm so very stuck on this!

Thanks again.

Redferret, 3 years ago

Should be @media only screen not @media screen, I'm guessing thats it but you may want to make sure that using * as a selector works in all clients


Gmail app apologist
Graycode, 3 years ago

Hi Red,

Tbh, that hasn't flagged any issues with or without the 'only' but I've been specific given your reply. Also, the * is for yahoo predominantly so removing it will make it messy in Yahoo but the most of the other clients read the inline so it's working...!

Redferret :

Should be @media only screen not @media screen, I'm guessing thats it but you may want to make sure that using * as a selector works in all clients

jeremypeter, 3 years ago

I notice your using an unordered list <ul> and float: left; style declaration for your navigation which many email clients fuss over. You would be better off creating your nav using tables. Here is a quick example I threw together:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  <title></title>
  <style type="text/css">

    /* --- Desktop Styles --- */
      .nav { padding-bottom: 10px; }

      .nav td { 
        font-family: verdana, sans-serif; 
        font-size: 14px;
        color: #7E7C7C; 
      }
      
      .br { border-right: 1px solid #ACACAC;}


    /* --- Mobile Styles --- */
    @media only screen and (max-width: 480px){

      body[yahoo] .main-table { width: 320px !important; }

      body[yahoo] .nav { padding-bottom: 0 !important } 
      
      body[yahoo] .nav td { 
        display: block; 
        width: 100% !important; 
        margin-bottom: 10px;
      }

      body[yahoo] .br { border-right: none !important;}
    }
  </style>

</head>
<body yahoo="fix">


<table class="main-table" align="center" border="0" cellpadding="0" cellspacing="0" width="600">

  <tr>
    <td>
      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
         
         <tr>
           <td class="nav">
             <table align="center" border="0" cellpadding="10" cellspacing="0" width="100%">
             
               <tr>
                 <td class="br" width="25%" bgcolor="#E1E1E1">Austria</td>
                 <td class="br" width="25%" bgcolor="#E1E1E1">France</td>
                 <td class="br" width="25%" bgcolor="#E1E1E1">Italy</td>
                 <td width="25%" bgcolor="#E1E1E1">Switzerland</td>
               </tr>
               
             </table>             
           </td>
         </tr>
        <!-- end nav row 1 -->

         <tr>
           <td class="nav">
             <table align="center" border="0" cellpadding="10" cellspacing="0" width="100%">
             
               <tr>
                 <td class="br" width="25%" bgcolor="#E1E1E1">Canada</td>
                 <td class="br" width="25%" bgcolor="#E1E1E1">USA</td>
                 <td width="75%" bgcolor="#E1E1E1">All Ski Destinations</td>
               </tr>
               
             </table> 
           </td>
         </tr>
         <!-- end nav row 2 -->
      </table> 
    </td>
  </tr>

</table>
</body>
</html>
roshodgekiss roshodgekiss, 3 years ago

Hi there Graycode, while your template was 99% there, it's worth noting that there were a few unusual things happening, including a bit of invalid code, plus Gmail not so much triggering your media query, as applying their own in-house styles. I made a few tweaks to the code to fix the issues in Gmail, but there's still a little to do (read on):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Crystal Ski</title>
<style type="text/css">

body {
    width:100% !important;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    margin:0;
    padding:0;
    -webkit-text-size-adjust: none; 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%; 
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }

h3.subheader { font-size: 22px; font-weight: 900; line-height: 1.1; font-family: 'Helvetica Neue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0 0 15px; color: #0166b1; padding: 0; }

tr, td { margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }

/* CSS for hiding content in desktop/webmail clients */
.hide img {
background-image: http://www.crystalski.co.uk/emails/Template2013/images/hero_image_template.jpg;
    max-height: 0px;
    font-size: 0;
    display: block;
}

/* Fix for Gmail adding margins to lists */
.gs li {
margin-left: 0 !important;
}

/*Client specific styles*/

<!-- -------------------------------------YAHOO--------------------------------------> 
/*  attribute selectors for YAHOO mail to prevent YAHOO displaying mobile version */  
@media only screen and (max-width:768px) {
 *[class=menu] li {
 width: 25px !important;
 margin-bottom:5px !important;
}
}
 @media only screen and (max-width: 480px) {
 *[class=menu] li {
 position: static !important;
 width: 100% !important;
 margin-bottom:5px !important;
}
 *[class=menu] li a {
 border: none !important;
}
 *[class=menu].end {
 position: static !important;
 width: 100% !important;
}
    /* Media query for displaying content in mobile email clients */
    .hide {
max-height: none !important;
 font-size: 12px !important;
 display: block !important;
}
}
<!-- ----------------------------------HOTMAIL------------------------------------ -->  
.ExternalClass { width:100%; } /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font,  .ExternalClass td, .ExternalClass div {
    line-height: 100%;
} /* Force Hotmail to display normal line spacing.  */
/** Hotmail header color reset: Hotmail replaces your header color styles with a green color on H2, H3, H4, H5, and H6 tags. In this example, the color is reset to black for a non-linked header, blue for a linked header, red for an active header (limited support), and purple for a visited header (limited support).  Replace with your choice of color. The !important is really what is overriding Hotmail's styling. Hotmail also sets the H1 and H2 tags to the same size.**/
h1, h2, h3, h4, h5, h6 {
    color: #1b3180 !important;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #1b3180 !important;
}
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
    color: #1b3180 !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: #1b3180 !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. */
}
<!--
-------------------------------------OUTLOOK------------------------------------ -->  
#outlook a { padding:0; } /* Force Outlook to provide a "view in browser" menu link. */

</style>
</head>
<body bgcolor="#ECECEC">
<!-- HEADER -->
<table style="margin: 0; background-color: #FFFFFF; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%;" width="100%" bgcolor="#FFFFFF">
  <tr>
    <td></td>
    <td style="max-width: 640px !important; clear: both !important; margin: 0 auto; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; display: block !important;"><div style="max-width: 600px; margin: 0 auto; padding: 15px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; display: block;">
        <table style="margin: 0; background-color: #FFFFFF; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%;" bgcolor="#FFFFFF">
          <tr>
            <td style="font-weight: 600; font-size: 12px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; color: #CCC; padding: 0 50px 10px 0;"><a href="http://www.crystalski.co.uk/contact-us/" target="_blank" style="text-decoration:none; font-weight: 600; font-size: 12px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #CCC;"> Ask a question</a></td>
            <td align="right" style="font-weight: 600; font-size: 12px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; color: #CCC; 
"><a href="http://www.ski-buzz.co.uk/" target="_blank" style="text-decoration:none; font-weight: 600; font-size: 12px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #CCC;">Read our blog</a></td>
          </tr>
          <tr style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; display:block;">
            <td colspan="2" style="font-size: 12px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; color: #CCC; padding: 0 0 10px;"><div style="position: static !important; margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; list-style-type: none !important; width: 220px; float: right !important;">
                <!--social icons in header-->
                <div align="left" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 10px; height: 24px; width: 24px; float: left;"><a href="http://www.facebook.com/crystalski" target="_blank"><img alt="Facebook Icon" src="http://www.crystalski.co.uk/emails/Template2013/images/FB.png" border="0" style="max-width: 100%; margin: 0; padding: 0;" /></a></div>
                <div align="left" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 10px; height: 24px; width: 24px; float: left;"><a href="http://twitter.com/#!/crystalski" target="_blank"><img alt="Twitter Icon" src="http://www.crystalski.co.uk/emails/Template2013/images/twit.png" border="0" style="max-width: 100%; margin: 0; padding: 0;" /></a></div>
                <div align="left" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 10px; height: 24px; width: 24px; float: left;"><a href="http://www.youtube.com/crystalholidays" target="_blank"><img alt="Youtube Icon" src="http://www.crystalski.co.uk/emails/Template2013/images/youtube.png" border="0" style="max-width: 100%; margin: 0; padding: 0;" /></a></div>
                <div align="left" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 10px; height: 24px; width: 24px; float: left;"><a href="http://www.flickr.com/photos/crystalski" target="_blank"><img alt="Flickr Icon" src="http://www.crystalski.co.uk/emails/Template2013/images/flickr.png" border="0" style="max-width: 100%; margin: 0; padding: 0;" /></a></div>
                <div align="left" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 10px 0 10px 10px; height: 24px; width: 24px; float: left;"><a href="https://plus.google.com/110372086248761176451" target="_blank"><img alt="Google+ Icon" src="http://www.crystalski.co.uk/emails/Template2013/images/gplus.png" border="0" style="max-width: 100%; margin: 0; padding: 0;" /></a></div>
              </div></td>
          </tr>
        </table>
      </div></td>
    <td style="max-width: 640px !important; clear: both !important; margin: 0 auto; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; display: block !important;"><div style="max-width: 600px; margin: 0 auto; padding: 15px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; display: block;">
        <table style="margin: 0; background-color: #FFFFFF; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%;" bgcolor="#FFFFFF">
          <tr>
            <td height="10" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0 10px 0 0;"></td>
            <td align="right" rowspan="5"><img src="http://www.crystalski.co.uk/emails/Template2013/images/atol.jpg" alt="atol logo" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>
          </tr>
          <tr>
            <td height="42" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0 10px 0 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/Crystalskisnowboardlrg.png" alt="Crystal logo" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>
          </tr>
          <tr>
            <td style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #CCCCCC; margin: 0; padding: 0;">The UK's number 1 for
              ski holidays</td>
          </tr>
        </table>
        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 100%;">
        </table>
      </div></td>
    <td></td>
  </tr>
</table>
<!-- HEADER -->
<!-- BODY -->
<table style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 100%;">
  <tr>
    <td></td>
    <td class="container" style="max-width: 640px !important; clear: both !important; margin: 0 auto; background-color: #FFFFFF; font-family: Verdana, Geneva, sans-serif; padding: 0; display: block !important;" bgcolor="#FFFFFF"><!------------------------------------- 
                                        NAVIGATION 
                 --------------------------------------->
      <div style="padding:15px; max-width:600px; margin:0 auto; display:block; ">
        <ul class="menu" style="font-weight: normal; font-size: 14px; margin: 0; background-color: #FFFFFF; padding: 0; border: none; line-height: 1.6; outline: none; font-family: Verdana, Geneva, sans-serif; text-decoration: none; width: 100%;">
          <li style="list-style: none; float: left; width: 25%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;" align="left"> <a href="http://www.crystalski.co.uk/ski-resorts/austria-ski-holidays/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: none; color: #696969; font-family: Verdana, Geneva, sans-serif;">Austria</a></li>
          <li style="list-style: none; float: left; width: 25%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;" align="left"> <a href="http://www.crystalski.co.uk/ski-resorts/france-ski-holidays/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: 1px solid #acacac; color: #696969; font-family: Verdana, Geneva, sans-serif;">France</a></li>
          <li style="list-style: none; float: left; width: 25%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;" align="left"> <a href="http://www.crystalski.co.uk/ski-resorts/italy-ski-holidays/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: 1px solid #acacac; color: #696969; font-family: Verdana, Geneva, sans-serif;">Italy</a></li>
          <li style="list-style: none; float: left; width: 25%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;" align="left"> <a href="http://www.crystalski.co.uk/ski-resorts/switzerland-ski-holidays/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: 1px solid #acacac; color: #696969; font-family: Verdana, Geneva, sans-serif;">Switzerland</a></li>
          <li style="list-style: none; float: left; width: 25%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;" align="left"> <a href="http://www.crystalski.co.uk/ski-resorts/canada-ski-holidays/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: none; color: #696969; font-family: Verdana, Geneva, sans-serif;">Canada</a></li>
          <li style="list-style: none; float: left; width: 25%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;" align="left"> <a href="http://www.crystalski.co.uk/ski-resorts/usa-ski-holidays/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: 1px solid #acacac; color: #696969; font-family: Verdana, Geneva, sans-serif;">USA</a></li>
          <li class="end" style=" list-style: none; float: left; width: 50%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;" align="left"> <a href="http://www.crystalski.co.uk/ski-resorts/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: 1px solid #acacac; color: #696969; font-family: Verdana, Geneva, sans-serif;">All Ski Destinations</a></li>
        </ul>
        <table style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 100%;">
          <tr>
            <td><br />
              <!-- Hero image -->
              <p style="margin: 0 0 10px; padding: 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/hero_image.jpg" alt="skiing in 2013" style="max-width: 100%; margin: 0; padding: 0; width: 100% !important;" class="hide" /></p>
              <!-- Hero image -->
              <!-- Blue seperator -->
              <p style="font-weight: normal; font-size: 14px; margin: 0 10px; padding: 0; border-top-color: #1b3281; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border-top-style: solid; border-top-width: 4px;"></p>
              <br />
              <h1 style="font-weight: bold; font-size: 27px; margin: -20px 0 0; background-color: #ECF8FF; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #1b3180; padding: 15px 15px 0;">Welcome Mr Smith,</h1>
              <p style="font-weight: normal; font-size: 14px; margin: 0 0 15px; background-color: #ECF8FF; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.6; padding: 15px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
              <hr style="margin: 0; border-top-color: rgba(0, 0, 0, 0.1); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border-bottom-style: solid; padding: 0; border-top-style: solid; border-bottom-color: rgba(255, 255, 255, 0.3); border-width: 1px 0; height: 0;" />
              <!--section separator-->
              <br />
              <h3 class="subheader">Subheader 1</h3>
              <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 15px; padding: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
              <table width="100%" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 100%;">
                <tr>
                  <td><!--- column 1 -->
                    <table align="center" style="min-width: 279px; margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 280px; float: left;">
                      <tr>
                        <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 15px;"><p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/Sub1.jpg" alt="Delta Whistler Village" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></p></td>
                      </tr>
                    </table>
                    <!-- /column 1 -->
                    <!--- column 2 -->
                    <table align="left" style="min-width: 279px; margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 280px; float: left;">
                      <tr>
                        <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 15px;"><h4 style="font-size: 20px; font-weight: 500; line-height: 1.1; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0 0 15px; color: #0166b1; padding: 0;">Delta Whistler
                            Village</h4>
                          <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">Lorem ipsum dolor
                            sit amet, consectetur
                            adipisicing elit, sed
                            do eiusmod tempor
                            incididunt ut labore et
                            dolore magna aliqua.
                            Duis autem vel eum
                            iriure dolor in
                            hendrerit
                            in</p>
                          <a style="-webkit-border-radius: 8px; font-weight: bold; cursor: pointer; margin: 0 0 10px; background-color: #ed1c24; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0px solid #ed1c24; padding: 10px 16px; text-decoration: none; color: #FFF; display: block !important; text-align: center; background-image: none !important; -moz-border-radius: 8px; border-radius: 8px;">Find out more
                          »</a></td>
                      </tr>
                    </table>
                    <!-- /column 2 --></td>
                </tr>
              </table>
              <br />
              <table width="100%" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 100%;">
                <tr>
                  <td><!--- column 1 -->
                    <table align="center" style="min-width: 279px; margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 280px; float: left;">
                      <tr>
                        <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 15px;"><p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/Sub1_1.jpg" alt="Delta Whistler Village" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></p></td>
                      </tr>
                    </table>
                    <!-- /column 1 -->
                    <!--- column 2 -->
                    <table align="left" style="min-width: 279px; margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 280px; float: left;">
                      <!--<tr bgcolor="#1b3281">
                                            <td>                                
                                                <p style="color:#FFFFFF; font-weight:bold;">Delta Whistler Village, CANADA</p>
                                            </td>
                                      </tr>-->
                      <tr>
                        <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 15px;"><h4 style="font-size: 20px; font-weight: 500; line-height: 1.1; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0 0 15px; color: #0166b1; padding: 0;">Delta Whistler
                            Village</h4>
                          <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">Lorem ipsum dolor
                            sit amet, consectetur
                            adipisicing elit, sed
                            do eiusmod tempor
                            incididunt ut labore et
                            dolore magna aliqua.
                            Duis autem vel eum
                            iriure dolor in
                            hendrerit
                            in</p>
                          <a style="-webkit-border-radius: 8px; font-weight: bold; cursor: pointer; margin: 0 0 10px; background-color: #ed1c24; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0px solid #ed1c24; padding: 10px 16px; text-decoration: none; color: #FFF; display: block !important; text-align: center; background-image: none !important; -moz-border-radius: 8px; border-radius: 8px;">Find out more
                          »</a></td>
                      </tr>
                    </table>
                    <!-- /column 2 --></td>
                </tr>
              </table>
              <p style="font-weight: normal; font-size: 14px; margin: 0 0 15px; background-color: #ECF8FF; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.6; padding: 15px;">Lorem ipsum dolor sit amet,
                consectetuer adipiscing elit, sed diam nonummy
                nibh euismod tincidunt ut laoreet dolore magna
                aliquam erat volutpat. Ut wisi enim ad minim
                veniam, quis nostrud exerci tation ullamcorper
                suscipit lobortis nisl ut aliquip ex ea commodo
                consequat. <a href="www.crystal.co.uk" style="font-weight: bold; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-decoration: none; color: #2BA6CB; margin: 0; padding: 0;">Duis
                autem vel eum iriure dolor in hendrerit in
                vulputate velit esse molestie consequat,</a> vel illum dolore eu feugiat nulla facilisis at
                vero eros et accumsan et iusto odio dignissim
                qui blandit praesent luptatum zzril delenit
                augue duis dolore te feugait nulla facilisi.
                Nam liber tempor cum soluta nobis eleifend
                option congue nihil imperdiet doming id quod
                mazim placerat facer possim assum.</p>
              <!-- /Callout Panel -->
              <br />
              <!--section separator-->
              <hr style="margin: 0; border-top-color: rgba(0, 0, 0, 0.1); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border-bottom-style: solid; padding: 0; border-top-style: solid; border-bottom-color: rgba(255, 255, 255, 0.3); border-width: 1px 0; height: 0;" />
              <!-- end section separator-->
              <br />
              <h3 class="subheader">Subheader 2</h3>
              <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpaq ui officia deserunt mollit anim id est laborum.</p>
              <!--double panel-->
              <table width="100%" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 100%;">
                <tr>
                  <td><!--- column 1 -->
                    <table align="left" width="100%" style="min-width: 279px; margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 280px; float: left;">
                      <tr>
                        <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 15px;"><p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/Sub2.jpg" alt="Another snowy place" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></p></td>
                      </tr>
                    </table>
                    <!-- /column 1 -->
                    <!--- column 2 -->
                    <table align="left" style="min-width: 279px; margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 280px; float: left;">
                      <tr>
                        <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 15px;"><p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">Lorem ipsum dolor
                            sit amet, consectetur
                            adipisicing elit, sed
                            do eiusmod tempor
                            incididunt ut labore et
                            dolore magna aliqua.
                            Duis autem vel eum
                            iriure dolor in
                            hendrerit
                            in</p>
                          <a style="-webkit-border-radius: 8px; font-weight: bold; cursor: pointer; margin: 0 0 10px; background-color: #ed1c24; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0px solid #ed1c24; padding: 10px 16px; text-decoration: none; color: #FFF; display: block !important; text-align: center; background-image: none !important; -moz-border-radius: 8px; border-radius: 8px;">Click here »</a></td>
                      </tr>
                    </table>
                    <!-- /column 2 --></td>
                </tr>
              </table>
              <!-- double panel -->
              <br />
              <hr style="margin: 0; border-top-color: rgba(0, 0, 0, 0.1); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border-bottom-style: solid; padding: 0; border-top-style: solid; border-bottom-color: rgba(255, 255, 255, 0.3); border-width: 1px 0; height: 0;" />
              <!--section separator-->
              <br />
              <h3 class="subheader">Subheader 3</h3>
              <table style="margin: 0; border-collapse: collapse; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%;">
                <tbody>
                  <!--first row-->
                  <tr style="margin: 0; background-color: #eee; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0;" bgcolor="#eee">
                    <td width="59%" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left"><a href="http://www.google.co.uk" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0; text-decoration:none;">Arinsal</a></td>
                    <td width="15%" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left"> from</td>
                    <td width="26%" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left"><a href="http://www.google.co.uk" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0; text-decoration:none;">£189</a></td>
                  </tr>
                  <!-- end first row-->
                  <!--second row-->
                  <tr>
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left"><a href="http://www.google.co.uk" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0; text-decoration:none;">Flaine</a></td>
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">from</td>
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">£199</td>
                  </tr>
                  <!--end second row-->
                  <!--third row-->
                  <tr style="margin: 0; background-color: #eee; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0;" bgcolor="#eee">
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left"><a href="http://www.google.co.uk" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0; text-decoration:none;">Rauris</a></td>
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">from</td>
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">£199</td>
                  </tr>
                  <!-- end third row-->
                  <!--fourth row-->
                  <tr>
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left"><a href="http://www.google.co.uk" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0; text-decoration:none;">Bankso</a></td>
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">from</td>
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">£199</td>
                  </tr>
                  <!--end fourth row-->
                  <!--fourth row-->
                  <tr style="margin: 0; background-color: #eee; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0;" bgcolor="#eee">
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left"><a href="http://www.google.co.uk" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0; text-decoration:none;">Some other place</a></td>
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">from</td>
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">£199</td>
                  </tr>
                  <!-- end fourth row-->
                </tbody>
              </table>
              <br />
              <br />
              <hr style="margin: 0; border-top-color: rgba(0, 0, 0, 0.1); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border-bottom-style: solid; padding: 0; border-top-style: solid; border-bottom-color: rgba(255, 255, 255, 0.3); border-width: 1px 0; height: 0;" />
              <!--section separator-->
              <br />
              <h3 class="subheader">Subheader 4</h3>
              <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/wide_img.jpg" alt="Go skiing with a group of mates this summer" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></p>
              <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint  occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              <a style="-webkit-border-radius: 8px; font-weight: bold; cursor: pointer; margin: 0 0 10px; background-color: #ed1c24; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0px solid #ed1c24; padding: 10px 16px; text-decoration: none; color: #FFF; display: block !important; text-align: center; background-image: none !important; -moz-border-radius: 8px; border-radius: 8px;">More info
              »</a><br />
              <br />
              <br />
              <hr style="margin: 0; border-top-color: rgba(0, 0, 0, 0.1); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border-bottom-style: solid; padding: 0; border-top-style: solid; border-bottom-color: rgba(255, 255, 255, 0.3); border-width: 1px 0; height: 0;" />
              <!--section separator-->
              <br />
              <h3 class="subheader">Subheader 5</h3>
              <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;"><a href="http://www.youtube.com/watch?v=J3MFNMChdUc&amp;feature=share&amp;list=UUzXAsARBfGai5WB_HltVZJw" target="_blank" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/youtube.gif" alt="Crystal Ski say thank you!" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></a></p>
              <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">Lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation
                ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in
                reprehenderit in voluptate velit esse cillum
                dolore eu fugiat nulla pariatur. Excepteur sint
                occaecat cupidatat non proident, sunt in culpa
                qui officia deserunt mollit anim id est
                laborum.</p>
              <a style="-webkit-border-radius: 8px; font-weight: bold; cursor: pointer; margin: 0 0 10px; background-color: #ed1c24; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0px solid #ed1c24; padding: 10px 16px; text-decoration: none; color: #FFF; display: block !important; text-align: center; background-image: none !important; -moz-border-radius: 8px; border-radius: 8px;">More info
              »</a><br />
              <br />
              <p style="font-size: 14px; font-weight: normal; margin: 0 0 15px; background-color: #2a3563; padding: 15px; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #FFFFFF; text-align: center;" align="center">Visit your nearest ABTA agent
                or call us on<br />
                <a href="tel:08712315636" style="font-size: 18px; font-weight: bold; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; padding: 0; text-decoration: none; color: #FFFFFF;">0871 231
                5636</a><br />
                Calls cost 10p per minute plus network
                extras</p></td>
          </tr>
        </table>
      </div></td>
    <td></td>
  </tr>
</table>
<!-- /BODY -->
<!-- FOOTER -->
<table style="clear: both !important; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%;">
  <tr>
    <td></td>
    <td style="max-width: 640px !important; clear: both !important; margin: 0 auto; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; display: block !important;"><!-- content -->
      <div style="max-width: 600px; margin: 0 auto; padding: 15px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; display: block;">
        <table style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 100%;">
          <tr>
            <td align="center"><table width="100%" style="margin: 0; border-collapse: collapse; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%;">
                <tr>
                  <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ececec; padding: 6px; text-align: left;" align="left"><img src="http://www.crystalski.co.uk/emails/Template2013/images/snowcentre.jpg" alt="buy our holidays from the snowcentre" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>
                  <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ececec; padding: 6px; text-align: left;" align="left"><img src="http://www.crystalski.co.uk/emails/Template2013/images/snozone.jpg" alt="buy our holidays from snozone" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>
                  <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ececec; padding: 6px; text-align: left;" align="left"><img src="http://www.crystalski.co.uk/emails/Template2013/images/chillfactor.jpg" alt="buy our holidays from chill factor" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>
                  <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ececec; padding: 6px; text-align: left;" align="left"><img src="http://www.crystalski.co.uk/emails/Template2013/images/snowfactor.jpg" alt="buy our holidays from snow factor" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>
                  <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ececec; padding: 6px; text-align: left;" align="left"><img src="http://www.crystalski.co.uk/emails/Template2013/images/snowrock.jpg" alt="buy our holidays from snow+rock" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>
                </tr>
              </table>
              <br />
              <br />
              <p style="font-weight: normal; font-size: 10px; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">All the flights and
                flight-inclusive holidays in this email are
                financially protected by the ATOL scheme. When
                you pay you will be supplied with an ATOL
                Certificate. Please ask for it and check to
                ensure that everything you booked (flights,
                hotels and other services) is listed on it.
                Please see our booking conditions for further
                information or for more information about
                financial protection and the ATOL Certificate
                go to: www.atol.org.uk/ATOLCertificate. Our
                ATOL number is ATOL 2524. For package holidays
                that do not include travel by air we provide
                security by way of a bond held by ABTA. Our
                ABTA member number is V5126. If you book
                arrangements other than a package holiday this
                financial protection will not apply. Please see
                our booking conditions for more information.
                Registered Office: TUI Travel House, Crawley
                Business Quarter, Fleming Way, Crawley, West
                Sussex. RH10 9QL. Registered No: 2830117. ABTA
                No: V5126. VAT No: 233368762. © 2013 Crystal
                Ski. All rights reserved.</p>
              <p style="font-weight: normal; font-size: 10px; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;"><a href="#d41d8cd98f00b204e9800998ecf8427e" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0;">Terms and
                conditions</a> | <unsubscribe style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0;">Unsubscribe</unsubscribe></p></td>
          </tr>
        </table>
      </div>
      <!-- /content --></td>
    <td></td>
  </tr>
</table>
<!-- /FOOTER -->
</body>
</html>

So, in regards to Outlook.com, I'm sorry to say it doesn't support float at all. Your best bet is to use a table layout instead of <ul><li>'s for the nav and apply align="left" instead.

Same goes for the social sharing links - try using aligned tables instead of <div style="float: left;">

As for Outlook 20xx, it doesn't support the width CSS property when applied to <div>, <span> or inline elements, thus why the width: 25% declaration isn't working. Thus, another reason to use tables for the navigation bar.

So, to get this looking just right, there's still a bit to do. However, it is clear that your media query isn't being triggered in these clients, it's just a matter of shoddy CSS support. Sorry I couldn't fix everything here, but best of luck!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
roshodgekiss roshodgekiss, 3 years ago

Oh wow, jeremypeter and I were working on the same thing and came up with the same conclusion. Magic! :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Graycode, 3 years ago

Hi roshodgekiss, As always a big help! Thank you for the code that you provided for me. I imagine that these fixes are CSS based as it can be a tiresome task looking over hundreds of lines of code for a difference!

I'm going to implement and hopefully this will give me what i'm looking for.

Thank you.

roshodgekiss :

Hi there Graycode, while your template was 99% there, it's worth noting that there were a few unusual things happening, including a bit of invalid code, plus Gmail not so much triggering your media query, as applying their own in-house styles. I made a few tweaks to the code to fix the issues in Gmail, but there's still a little to do (read on):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Crystal Ski</title>
<style type="text/css">

body {
    width:100% !important;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    margin:0;
    padding:0;
    -webkit-text-size-adjust: none; 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%; 
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }

h3.subheader { font-size: 22px; font-weight: 900; line-height: 1.1; font-family: 'Helvetica Neue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0 0 15px; color: #0166b1; padding: 0; }

tr, td { margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }

/* CSS for hiding content in desktop/webmail clients */
.hide img {
background-image: http://www.crystalski.co.uk/emails/Template2013/images/hero_image_template.jpg;
    max-height: 0px;
    font-size: 0;
    display: block;
}

/* Fix for Gmail adding margins to lists */
.gs li {
margin-left: 0 !important;
}

/*Client specific styles*/

<!-- -------------------------------------YAHOO--------------------------------------> 
/*  attribute selectors for YAHOO mail to prevent YAHOO displaying mobile version */  
@media only screen and (max-width:768px) {
 *[class=menu] li {
 width: 25px !important;
 margin-bottom:5px !important;
}
}
 @media only screen and (max-width: 480px) {
 *[class=menu] li {
 position: static !important;
 width: 100% !important;
 margin-bottom:5px !important;
}
 *[class=menu] li a {
 border: none !important;
}
 *[class=menu].end {
 position: static !important;
 width: 100% !important;
}
    /* Media query for displaying content in mobile email clients */
    .hide {
max-height: none !important;
 font-size: 12px !important;
 display: block !important;
}
}
<!-- ----------------------------------HOTMAIL------------------------------------ -->  
.ExternalClass { width:100%; } /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font,  .ExternalClass td, .ExternalClass div {
    line-height: 100%;
} /* Force Hotmail to display normal line spacing.  */
/** Hotmail header color reset: Hotmail replaces your header color styles with a green color on H2, H3, H4, H5, and H6 tags. In this example, the color is reset to black for a non-linked header, blue for a linked header, red for an active header (limited support), and purple for a visited header (limited support).  Replace with your choice of color. The !important is really what is overriding Hotmail's styling. Hotmail also sets the H1 and H2 tags to the same size.**/
h1, h2, h3, h4, h5, h6 {
    color: #1b3180 !important;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #1b3180 !important;
}
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
    color: #1b3180 !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: #1b3180 !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. */
}
<!--
-------------------------------------OUTLOOK------------------------------------ -->  
#outlook a { padding:0; } /* Force Outlook to provide a "view in browser" menu link. */

</style>
</head>
<body bgcolor="#ECECEC">
<!-- HEADER -->
<table style="margin: 0; background-color: #FFFFFF; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%;" width="100%" bgcolor="#FFFFFF">
  <tr>
    <td></td>
    <td style="max-width: 640px !important; clear: both !important; margin: 0 auto; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; display: block !important;"><div style="max-width: 600px; margin: 0 auto; padding: 15px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; display: block;">
        <table style="margin: 0; background-color: #FFFFFF; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%;" bgcolor="#FFFFFF">
          <tr>
            <td style="font-weight: 600; font-size: 12px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; color: #CCC; padding: 0 50px 10px 0;"><a href="http://www.crystalski.co.uk/contact-us/" target="_blank" style="text-decoration:none; font-weight: 600; font-size: 12px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #CCC;"> Ask a question</a></td>
            <td align="right" style="font-weight: 600; font-size: 12px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; color: #CCC; 
"><a href="http://www.ski-buzz.co.uk/" target="_blank" style="text-decoration:none; font-weight: 600; font-size: 12px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #CCC;">Read our blog</a></td>
          </tr>
          <tr style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; display:block;">
            <td colspan="2" style="font-size: 12px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; color: #CCC; padding: 0 0 10px;"><div style="position: static !important; margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; list-style-type: none !important; width: 220px; float: right !important;">
                <!--social icons in header-->
                <div align="left" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 10px; height: 24px; width: 24px; float: left;"><a href="http://www.facebook.com/crystalski" target="_blank"><img alt="Facebook Icon" src="http://www.crystalski.co.uk/emails/Template2013/images/FB.png" border="0" style="max-width: 100%; margin: 0; padding: 0;" /></a></div>
                <div align="left" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 10px; height: 24px; width: 24px; float: left;"><a href="http://twitter.com/#!/crystalski" target="_blank"><img alt="Twitter Icon" src="http://www.crystalski.co.uk/emails/Template2013/images/twit.png" border="0" style="max-width: 100%; margin: 0; padding: 0;" /></a></div>
                <div align="left" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 10px; height: 24px; width: 24px; float: left;"><a href="http://www.youtube.com/crystalholidays" target="_blank"><img alt="Youtube Icon" src="http://www.crystalski.co.uk/emails/Template2013/images/youtube.png" border="0" style="max-width: 100%; margin: 0; padding: 0;" /></a></div>
                <div align="left" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 10px; height: 24px; width: 24px; float: left;"><a href="http://www.flickr.com/photos/crystalski" target="_blank"><img alt="Flickr Icon" src="http://www.crystalski.co.uk/emails/Template2013/images/flickr.png" border="0" style="max-width: 100%; margin: 0; padding: 0;" /></a></div>
                <div align="left" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 10px 0 10px 10px; height: 24px; width: 24px; float: left;"><a href="https://plus.google.com/110372086248761176451" target="_blank"><img alt="Google+ Icon" src="http://www.crystalski.co.uk/emails/Template2013/images/gplus.png" border="0" style="max-width: 100%; margin: 0; padding: 0;" /></a></div>
              </div></td>
          </tr>
        </table>
      </div></td>
    <td style="max-width: 640px !important; clear: both !important; margin: 0 auto; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; display: block !important;"><div style="max-width: 600px; margin: 0 auto; padding: 15px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; display: block;">
        <table style="margin: 0; background-color: #FFFFFF; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%;" bgcolor="#FFFFFF">
          <tr>
            <td height="10" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0 10px 0 0;"></td>
            <td align="right" rowspan="5"><img src="http://www.crystalski.co.uk/emails/Template2013/images/atol.jpg" alt="atol logo" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>
          </tr>
          <tr>
            <td height="42" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0 10px 0 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/Crystalskisnowboardlrg.png" alt="Crystal logo" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>
          </tr>
          <tr>
            <td style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #CCCCCC; margin: 0; padding: 0;">The UK's number 1 for
              ski holidays</td>
          </tr>
        </table>
        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 100%;">
        </table>
      </div></td>
    <td></td>
  </tr>
</table>
<!-- HEADER -->
<!-- BODY -->
<table style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 100%;">
  <tr>
    <td></td>
    <td class="container" style="max-width: 640px !important; clear: both !important; margin: 0 auto; background-color: #FFFFFF; font-family: Verdana, Geneva, sans-serif; padding: 0; display: block !important;" bgcolor="#FFFFFF"><!------------------------------------- 
                                        NAVIGATION 
                 --------------------------------------->
      <div style="padding:15px; max-width:600px; margin:0 auto; display:block; ">
        <ul class="menu" style="font-weight: normal; font-size: 14px; margin: 0; background-color: #FFFFFF; padding: 0; border: none; line-height: 1.6; outline: none; font-family: Verdana, Geneva, sans-serif; text-decoration: none; width: 100%;">
          <li style="list-style: none; float: left; width: 25%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;" align="left"> <a href="http://www.crystalski.co.uk/ski-resorts/austria-ski-holidays/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: none; color: #696969; font-family: Verdana, Geneva, sans-serif;">Austria</a></li>
          <li style="list-style: none; float: left; width: 25%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;" align="left"> <a href="http://www.crystalski.co.uk/ski-resorts/france-ski-holidays/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: 1px solid #acacac; color: #696969; font-family: Verdana, Geneva, sans-serif;">France</a></li>
          <li style="list-style: none; float: left; width: 25%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;" align="left"> <a href="http://www.crystalski.co.uk/ski-resorts/italy-ski-holidays/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: 1px solid #acacac; color: #696969; font-family: Verdana, Geneva, sans-serif;">Italy</a></li>
          <li style="list-style: none; float: left; width: 25%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;" align="left"> <a href="http://www.crystalski.co.uk/ski-resorts/switzerland-ski-holidays/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: 1px solid #acacac; color: #696969; font-family: Verdana, Geneva, sans-serif;">Switzerland</a></li>
          <li style="list-style: none; float: left; width: 25%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;" align="left"> <a href="http://www.crystalski.co.uk/ski-resorts/canada-ski-holidays/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: none; color: #696969; font-family: Verdana, Geneva, sans-serif;">Canada</a></li>
          <li style="list-style: none; float: left; width: 25%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;" align="left"> <a href="http://www.crystalski.co.uk/ski-resorts/usa-ski-holidays/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: 1px solid #acacac; color: #696969; font-family: Verdana, Geneva, sans-serif;">USA</a></li>
          <li class="end" style=" list-style: none; float: left; width: 50%; background: #e1e1e1; margin-bottom:5px; text-decoration: none;" align="left"> <a href="http://www.crystalski.co.uk/ski-resorts/?em=cs250113" style=" display: block; padding-left: 15px; width:auto; line-height: 40px; text-decoration: none; border-left: 1px solid #acacac; color: #696969; font-family: Verdana, Geneva, sans-serif;">All Ski Destinations</a></li>
        </ul>
        <table style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 100%;">
          <tr>
            <td><br />
              <!-- Hero image -->
              <p style="margin: 0 0 10px; padding: 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/hero_image.jpg" alt="skiing in 2013" style="max-width: 100%; margin: 0; padding: 0; width: 100% !important;" class="hide" /></p>
              <!-- Hero image -->
              <!-- Blue seperator -->
              <p style="font-weight: normal; font-size: 14px; margin: 0 10px; padding: 0; border-top-color: #1b3281; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border-top-style: solid; border-top-width: 4px;"></p>
              <br />
              <h1 style="font-weight: bold; font-size: 27px; margin: -20px 0 0; background-color: #ECF8FF; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #1b3180; padding: 15px 15px 0;">Welcome Mr Smith,</h1>
              <p style="font-weight: normal; font-size: 14px; margin: 0 0 15px; background-color: #ECF8FF; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.6; padding: 15px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
              <hr style="margin: 0; border-top-color: rgba(0, 0, 0, 0.1); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border-bottom-style: solid; padding: 0; border-top-style: solid; border-bottom-color: rgba(255, 255, 255, 0.3); border-width: 1px 0; height: 0;" />
              <!--section separator-->
              <br />
              <h3 class="subheader">Subheader 1</h3>
              <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 15px; padding: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
              <table width="100%" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 100%;">
                <tr>
                  <td><!--- column 1 -->
                    <table align="center" style="min-width: 279px; margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 280px; float: left;">
                      <tr>
                        <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 15px;"><p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/Sub1.jpg" alt="Delta Whistler Village" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></p></td>
                      </tr>
                    </table>
                    <!-- /column 1 -->
                    <!--- column 2 -->
                    <table align="left" style="min-width: 279px; margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 280px; float: left;">
                      <tr>
                        <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 15px;"><h4 style="font-size: 20px; font-weight: 500; line-height: 1.1; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0 0 15px; color: #0166b1; padding: 0;">Delta Whistler
                            Village</h4>
                          <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">Lorem ipsum dolor
                            sit amet, consectetur
                            adipisicing elit, sed
                            do eiusmod tempor
                            incididunt ut labore et
                            dolore magna aliqua.
                            Duis autem vel eum
                            iriure dolor in
                            hendrerit
                            in</p>
                          <a style="-webkit-border-radius: 8px; font-weight: bold; cursor: pointer; margin: 0 0 10px; background-color: #ed1c24; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0px solid #ed1c24; padding: 10px 16px; text-decoration: none; color: #FFF; display: block !important; text-align: center; background-image: none !important; -moz-border-radius: 8px; border-radius: 8px;">Find out more
                          »</a></td>
                      </tr>
                    </table>
                    <!-- /column 2 --></td>
                </tr>
              </table>
              <br />
              <table width="100%" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 100%;">
                <tr>
                  <td><!--- column 1 -->
                    <table align="center" style="min-width: 279px; margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 280px; float: left;">
                      <tr>
                        <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 15px;"><p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/Sub1_1.jpg" alt="Delta Whistler Village" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></p></td>
                      </tr>
                    </table>
                    <!-- /column 1 -->
                    <!--- column 2 -->
                    <table align="left" style="min-width: 279px; margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 280px; float: left;">
                      <!--<tr bgcolor="#1b3281">
                                            <td>                                
                                                <p style="color:#FFFFFF; font-weight:bold;">Delta Whistler Village, CANADA</p>
                                            </td>
                                      </tr>-->
                      <tr>
                        <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 15px;"><h4 style="font-size: 20px; font-weight: 500; line-height: 1.1; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0 0 15px; color: #0166b1; padding: 0;">Delta Whistler
                            Village</h4>
                          <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">Lorem ipsum dolor
                            sit amet, consectetur
                            adipisicing elit, sed
                            do eiusmod tempor
                            incididunt ut labore et
                            dolore magna aliqua.
                            Duis autem vel eum
                            iriure dolor in
                            hendrerit
                            in</p>
                          <a style="-webkit-border-radius: 8px; font-weight: bold; cursor: pointer; margin: 0 0 10px; background-color: #ed1c24; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0px solid #ed1c24; padding: 10px 16px; text-decoration: none; color: #FFF; display: block !important; text-align: center; background-image: none !important; -moz-border-radius: 8px; border-radius: 8px;">Find out more
                          »</a></td>
                      </tr>
                    </table>
                    <!-- /column 2 --></td>
                </tr>
              </table>
              <p style="font-weight: normal; font-size: 14px; margin: 0 0 15px; background-color: #ECF8FF; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.6; padding: 15px;">Lorem ipsum dolor sit amet,
                consectetuer adipiscing elit, sed diam nonummy
                nibh euismod tincidunt ut laoreet dolore magna
                aliquam erat volutpat. Ut wisi enim ad minim
                veniam, quis nostrud exerci tation ullamcorper
                suscipit lobortis nisl ut aliquip ex ea commodo
                consequat. <a href="www.crystal.co.uk" style="font-weight: bold; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-decoration: none; color: #2BA6CB; margin: 0; padding: 0;">Duis
                autem vel eum iriure dolor in hendrerit in
                vulputate velit esse molestie consequat,</a> vel illum dolore eu feugiat nulla facilisis at
                vero eros et accumsan et iusto odio dignissim
                qui blandit praesent luptatum zzril delenit
                augue duis dolore te feugait nulla facilisi.
                Nam liber tempor cum soluta nobis eleifend
                option congue nihil imperdiet doming id quod
                mazim placerat facer possim assum.</p>
              <!-- /Callout Panel -->
              <br />
              <!--section separator-->
              <hr style="margin: 0; border-top-color: rgba(0, 0, 0, 0.1); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border-bottom-style: solid; padding: 0; border-top-style: solid; border-bottom-color: rgba(255, 255, 255, 0.3); border-width: 1px 0; height: 0;" />
              <!-- end section separator-->
              <br />
              <h3 class="subheader">Subheader 2</h3>
              <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpaq ui officia deserunt mollit anim id est laborum.</p>
              <!--double panel-->
              <table width="100%" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 100%;">
                <tr>
                  <td><!--- column 1 -->
                    <table align="left" width="100%" style="min-width: 279px; margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 280px; float: left;">
                      <tr>
                        <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 15px;"><p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/Sub2.jpg" alt="Another snowy place" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></p></td>
                      </tr>
                    </table>
                    <!-- /column 1 -->
                    <!--- column 2 -->
                    <table align="left" style="min-width: 279px; margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 280px; float: left;">
                      <tr>
                        <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 15px;"><p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">Lorem ipsum dolor
                            sit amet, consectetur
                            adipisicing elit, sed
                            do eiusmod tempor
                            incididunt ut labore et
                            dolore magna aliqua.
                            Duis autem vel eum
                            iriure dolor in
                            hendrerit
                            in</p>
                          <a style="-webkit-border-radius: 8px; font-weight: bold; cursor: pointer; margin: 0 0 10px; background-color: #ed1c24; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0px solid #ed1c24; padding: 10px 16px; text-decoration: none; color: #FFF; display: block !important; text-align: center; background-image: none !important; -moz-border-radius: 8px; border-radius: 8px;">Click here »</a></td>
                      </tr>
                    </table>
                    <!-- /column 2 --></td>
                </tr>
              </table>
              <!-- double panel -->
              <br />
              <hr style="margin: 0; border-top-color: rgba(0, 0, 0, 0.1); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border-bottom-style: solid; padding: 0; border-top-style: solid; border-bottom-color: rgba(255, 255, 255, 0.3); border-width: 1px 0; height: 0;" />
              <!--section separator-->
              <br />
              <h3 class="subheader">Subheader 3</h3>
              <table style="margin: 0; border-collapse: collapse; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%;">
                <tbody>
                  <!--first row-->
                  <tr style="margin: 0; background-color: #eee; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0;" bgcolor="#eee">
                    <td width="59%" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left"><a href="http://www.google.co.uk" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0; text-decoration:none;">Arinsal</a></td>
                    <td width="15%" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left"> from</td>
                    <td width="26%" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left"><a href="http://www.google.co.uk" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0; text-decoration:none;">£189</a></td>
                  </tr>
                  <!-- end first row-->
                  <!--second row-->
                  <tr>
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left"><a href="http://www.google.co.uk" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0; text-decoration:none;">Flaine</a></td>
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">from</td>
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">£199</td>
                  </tr>
                  <!--end second row-->
                  <!--third row-->
                  <tr style="margin: 0; background-color: #eee; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0;" bgcolor="#eee">
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left"><a href="http://www.google.co.uk" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0; text-decoration:none;">Rauris</a></td>
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">from</td>
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">£199</td>
                  </tr>
                  <!-- end third row-->
                  <!--fourth row-->
                  <tr>
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left"><a href="http://www.google.co.uk" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0; text-decoration:none;">Bankso</a></td>
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">from</td>
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">£199</td>
                  </tr>
                  <!--end fourth row-->
                  <!--fourth row-->
                  <tr style="margin: 0; background-color: #eee; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0;" bgcolor="#eee">
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left"><a href="http://www.google.co.uk" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0; text-decoration:none;">Some other place</a></td>
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">from</td>
                    <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ccc; padding: 6px; text-align: left;" align="left">£199</td>
                  </tr>
                  <!-- end fourth row-->
                </tbody>
              </table>
              <br />
              <br />
              <hr style="margin: 0; border-top-color: rgba(0, 0, 0, 0.1); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border-bottom-style: solid; padding: 0; border-top-style: solid; border-bottom-color: rgba(255, 255, 255, 0.3); border-width: 1px 0; height: 0;" />
              <!--section separator-->
              <br />
              <h3 class="subheader">Subheader 4</h3>
              <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/wide_img.jpg" alt="Go skiing with a group of mates this summer" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></p>
              <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint  occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              <a style="-webkit-border-radius: 8px; font-weight: bold; cursor: pointer; margin: 0 0 10px; background-color: #ed1c24; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0px solid #ed1c24; padding: 10px 16px; text-decoration: none; color: #FFF; display: block !important; text-align: center; background-image: none !important; -moz-border-radius: 8px; border-radius: 8px;">More info
              »</a><br />
              <br />
              <br />
              <hr style="margin: 0; border-top-color: rgba(0, 0, 0, 0.1); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border-bottom-style: solid; padding: 0; border-top-style: solid; border-bottom-color: rgba(255, 255, 255, 0.3); border-width: 1px 0; height: 0;" />
              <!--section separator-->
              <br />
              <h3 class="subheader">Subheader 5</h3>
              <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;"><a href="http://www.youtube.com/watch?v=J3MFNMChdUc&amp;feature=share&amp;list=UUzXAsARBfGai5WB_HltVZJw" target="_blank" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0;"><img src="http://www.crystalski.co.uk/emails/Template2013/images/youtube.gif" alt="Crystal Ski say thank you!" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></a></p>
              <p style="font-size: 14px; font-weight: normal; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">Lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation
                ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in
                reprehenderit in voluptate velit esse cillum
                dolore eu fugiat nulla pariatur. Excepteur sint
                occaecat cupidatat non proident, sunt in culpa
                qui officia deserunt mollit anim id est
                laborum.</p>
              <a style="-webkit-border-radius: 8px; font-weight: bold; cursor: pointer; margin: 0 0 10px; background-color: #ed1c24; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0px solid #ed1c24; padding: 10px 16px; text-decoration: none; color: #FFF; display: block !important; text-align: center; background-image: none !important; -moz-border-radius: 8px; border-radius: 8px;">More info
              »</a><br />
              <br />
              <p style="font-size: 14px; font-weight: normal; margin: 0 0 15px; background-color: #2a3563; padding: 15px; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #FFFFFF; text-align: center;" align="center">Visit your nearest ABTA agent
                or call us on<br />
                <a href="tel:08712315636" style="font-size: 18px; font-weight: bold; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; padding: 0; text-decoration: none; color: #FFFFFF;">0871 231
                5636</a><br />
                Calls cost 10p per minute plus network
                extras</p></td>
          </tr>
        </table>
      </div></td>
    <td></td>
  </tr>
</table>
<!-- /BODY -->
<!-- FOOTER -->
<table style="clear: both !important; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%;">
  <tr>
    <td></td>
    <td style="max-width: 640px !important; clear: both !important; margin: 0 auto; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; display: block !important;"><!-- content -->
      <div style="max-width: 600px; margin: 0 auto; padding: 15px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; display: block;">
        <table style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; width: 100%;">
          <tr>
            <td align="center"><table width="100%" style="margin: 0; border-collapse: collapse; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%;">
                <tr>
                  <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ececec; padding: 6px; text-align: left;" align="left"><img src="http://www.crystalski.co.uk/emails/Template2013/images/snowcentre.jpg" alt="buy our holidays from the snowcentre" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>
                  <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ececec; padding: 6px; text-align: left;" align="left"><img src="http://www.crystalski.co.uk/emails/Template2013/images/snozone.jpg" alt="buy our holidays from snozone" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>
                  <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ececec; padding: 6px; text-align: left;" align="left"><img src="http://www.crystalski.co.uk/emails/Template2013/images/chillfactor.jpg" alt="buy our holidays from chill factor" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>
                  <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ececec; padding: 6px; text-align: left;" align="left"><img src="http://www.crystalski.co.uk/emails/Template2013/images/snowfactor.jpg" alt="buy our holidays from snow factor" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>
                  <td style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #ececec; padding: 6px; text-align: left;" align="left"><img src="http://www.crystalski.co.uk/emails/Template2013/images/snowrock.jpg" alt="buy our holidays from snow+rock" style="max-width: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100% !important;" /></td>
                </tr>
              </table>
              <br />
              <br />
              <p style="font-weight: normal; font-size: 10px; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;">All the flights and
                flight-inclusive holidays in this email are
                financially protected by the ATOL scheme. When
                you pay you will be supplied with an ATOL
                Certificate. Please ask for it and check to
                ensure that everything you booked (flights,
                hotels and other services) is listed on it.
                Please see our booking conditions for further
                information or for more information about
                financial protection and the ATOL Certificate
                go to: www.atol.org.uk/ATOLCertificate. Our
                ATOL number is ATOL 2524. For package holidays
                that do not include travel by air we provide
                security by way of a bond held by ABTA. Our
                ABTA member number is V5126. If you book
                arrangements other than a package holiday this
                financial protection will not apply. Please see
                our booking conditions for more information.
                Registered Office: TUI Travel House, Crawley
                Business Quarter, Fleming Way, Crawley, West
                Sussex. RH10 9QL. Registered No: 2830117. ABTA
                No: V5126. VAT No: 233368762. © 2013 Crystal
                Ski. All rights reserved.</p>
              <p style="font-weight: normal; font-size: 10px; line-height: 1.6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 0;"><a href="#d41d8cd98f00b204e9800998ecf8427e" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0;">Terms and
                conditions</a> | <unsubscribe style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #2BA6CB; margin: 0; padding: 0;">Unsubscribe</unsubscribe></p></td>
          </tr>
        </table>
      </div>
      <!-- /content --></td>
    <td></td>
  </tr>
</table>
<!-- /FOOTER -->
</body>
</html>

So, in regards to Outlook.com, I'm sorry to say it doesn't support float at all. Your best bet is to use a table layout instead of <ul><li>'s for the nav and apply align="left" instead.

Same goes for the social sharing links - try using aligned tables instead of <div style="float: left;">

As for Outlook 20xx, it doesn't support the width CSS property when applied to <div>, <span> or inline elements, thus why the width: 25% declaration isn't working. Thus, another reason to use tables for the navigation bar.

So, to get this looking just right, there's still a bit to do. However, it is clear that your media query isn't being triggered in these clients, it's just a matter of shoddy CSS support. Sorry I couldn't fix everything here, but best of luck!

roshodgekiss roshodgekiss, 3 years ago

Oh Graycode, it's never a problem. I find it really satisfying to go through code - in fact, I've been doing it for about 8 years already and it still hasn't gotten old. Perhaps I'm just a bit strange (actually, this is a known fact).

Let us know how you go - I've got my fingers crossed that it all works out and you have a great week :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098