Cacher is the code snippet organizer for pro developers

!!! Strict
%html(xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en")
  %head
    %title= "HAML Responsive Email Template"
    %meta{ :content => "", :name => "description" }
    %meta{ :content => "", :name => "author" }
    %meta{ :content => "3 days", :name => "revisit-after" }
    %meta{ :content =>"width=device-width, initial-scale=1.0", :name=>"viewport" }

    %style{:type => "text/css"}
      :css
        #outlook a {padding:0;}
        body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
        .ExternalClass {width:100%;}
        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} 
        #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
        img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}
        a img {border:none;}
        .image_fix {display:block;}
        p {margin: 0px 0px !important;}
        table td {border-collapse: collapse;}
        table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
        a {color: #9ec459;text-decoration: none;text-decoration:none!important;}
        table[class=full] { width: 100%; clear: both; }
        
        @media only screen and (max-width: 640px) {
          a[href^="tel"], a[href^="sms"] {
            text-decoration: none;
            color: #9ec459;
            pointer-events: none;
            cursor: default;
          }

          .mobile_link a[href^="tel"], 
          .mobile_link a[href^="sms"] {
            text-decoration: default;
            color: #9ec459 !important;
            pointer-events: auto;
            cursor: default;
          }
          table[class=devicewidth] {width: 440px!important;text-align:center!important;}
          td[class=devicewidth] {width: 440px!important;text-align:center!important;}
          img[class=devicewidth] {width: 440px!important;text-align:center!important;}
          img[class=banner] {width: 440px!important;height:147px!important;}
          table[class=devicewidthinner] {width: 420px!important;text-align:center!important;}
          table[class=icontext] {width: 345px!important;text-align:center!important;}
          img[class="colimg2"] {width:420px!important;height:243px!important;}
          table[class="emhide"]{display: none!important;}
          img[class="logo"]{width:440px!important;height:110px!important;}
        }
        
        @media only screen and (max-width: 480px) {
          a[href^="tel"], a[href^="sms"] {
            text-decoration: none;
            color: #9ec459;
            pointer-events: none;
            cursor: default;
          }
          .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
            text-decoration: default;
            color: #9ec459 !important; 
            pointer-events: auto;
            cursor: default;
          }
          table[class=devicewidth] {width: 280px!important;text-align:center!important;}
          td[class=devicewidth] {width: 280px!important;text-align:center!important;}
          img[class=devicewidth] {width: 280px!important;text-align:center!important;}
          img[class=banner] {width: 280px!important;height:93px!important;}
          table[class=devicewidthinner] {width: 260px!important;text-align:center!important;}
          table[class=icontext] {width: 186px!important;text-align:center!important;}
          img[class="colimg2"] {width:260px!important;height:150px!important;}
          table[class="emhide"]{display: none!important;}
          img[class="logo"]{width:280px!important;height:70px!important;}
        }
  %body
    %table(width="100%" bgcolor="#484848" cellpadding="0" cellspacing="0" border="0" id="backgroundTable")
      %tbody
        %tr
          %td
            %table(width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" style="margin: 0 auto;")
              %tbody
                %tr
                  %td(width="100%")
                    %table(width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth")
                      %tbody
                        %tr
                          %td(width="100%" height="20")
                        %tr
                          %td
                            %table(width="280" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner")
                              %tbody
                                %tr
                                  %td(align="left" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 13px;color: #ffffff")
                                    Subject Line Here
                            %table(width="280" align="left" border="0" cellpadding="0" cellspacing="0" class="emhide")
                              %tbody
                                %tr
                                  %td(align="right" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 13px;color: #ffffff")
                                    %a(href="#" style="text-decoration: none; color: #ffffff")
                                      View Online 
                                %tr
                                  %td(width="100%" height="20")
    %table(width="100%" bgcolor="#f5f5f5" cellpadding="0" cellspacing="0" border="0" id="backgroundTable")
      %tbody
        %tr
          %td
            %table(width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" style="margin: 0 auto;")
              %tbody
                %tr
                  %td(width="100%")
                    %table(bgcolor="#f5f5f5" width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth")
                      %tbody
                        %tr
                          %td(align="center")
                            %a(target="_blank" href="#")
                              %img(width="600" border="0" height="150" alt="" border="0" style="display:block; border:none; outline:none; text-decoration:none;" src="http://lorempixel.com/600/150/" class="logo")
    %table( width="100%" bgcolor="#f5f5f5" cellpadding="0" cellspacing="0" border="0" id="backgroundTable")
      %tbody
        %tr
          %td
            %table(width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" style="margin: 0 auto;")
              %tbody
                %tr
                  %td(width="100%")
                    %table(bgcolor="#ffffff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth")
                      %tbody
                        %tr
                          %td(width="100%" height="20")
                            %tr
                              %td
                                %table(width="560" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidthinner")
                                  %tbody
                                    %tr
                                      %td(style="font-family: Helvetica, arial, sans-serif; font-size: 14px; font-weight:bold; color: #333333; text-align:left;line-height: 24px;")
                                        Lorem ipsum dolor sit
                                    %tr
                                      %td(height="5")
                                    %tr
                                      %td(style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #333333; text-align:left;line-height: 24px;")
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                    %tr
                                      %td(width="100%" height="5")
                                    %tr
                                      %td(style="font-family: Helvetica, arial, sans-serif; font-size: 14px; font-weight:bold; color: #333333; text-align:left;line-height: 24px;")
                                        %a(href="#" style="color:#9ec459;text-decoration:none;font-weight:bold;")
                                          Read More
                                    %tr
                                      %td(width="100%" height="20")
    %table(width="100%" bgcolor="#f5f5f5" cellpadding="0" cellspacing="0" border="0" id="backgroundTable")
      %tbody
        %tr
          %td
            %table(width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" style="margin: 0 auto;")
              %tbody
                %tr
                  %td(width="100%")
                    %table(bgcolor="#ffffff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth")
                      %tbody
                        %tr
                          %td
                            %table(width="290" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth") 
                              %tbody
                                %tr
                                  %td(width="100%" height="10") 
                                %tr
                                  %td
                                    %table(width="270" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner")
                                      %tbody
                                        %tr
                                          %td(width="270" height="150" align="center" class="devicewidth") 
                                            %img(src="http://lorempixel.com/270/150/" alt="" border="0" width="270" height="150" style="display:block; border:none; outline:none; text-decoration:none;" class="colimg2")
                                        %tr
                                          %td(width="100%" height="10")
                                        %tr
                                          %td(style="font-family: Helvetica, arial, sans-serif; font-size: 14px; font-weight:bold; color: #333333; text-align:left;line-height: 24px;")
                                            Lorem ipsum dolor sit
                                        %tr
                                          %td(width="100%" height="10")
                                        %tr
                                          %td(style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #333333; text-align:left;line-height: 24px;")
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                                        %tr
                                          %td(style="font-family: Helvetica, arial, sans-serif; font-size: 14px; font-weight:bold; color: #333333; text-align:left;line-height: 24px;")
                                            %a(href="#" style="color:#9ec459;text-decoration:none;font-weight:bold;")
                                              Read More
                                        %tr
                                          %td(width="100%" height="10")
                            %table(width="290" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth")
                              %tbody
                                %tr
                                  %td(width="100%" height="10")
                                %tr
                                  %td
                                    %table(width="270" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner")
                                      %tbody
                                        %tr
                                          %td(width="270" height="150" align="center" class="devicewidth")
                                            %img(src="http://lorempixel.com/270/150/" alt="" border="0" width="270" height="150" style="display:block; border:none; outline:none; text-decoration:none;" class="colimg2")
                                        %tr
                                          %td(width="100%" height="10")
                                        %tr
                                          %td(style="font-family: Helvetica, arial, sans-serif; font-size: 14px; font-weight:bold; color: #333333; text-align:left;line-height: 24px;")
                                            Lorem ipsum dolor sit
                                        %tr
                                          %td(width="100%" height="10")
                                        %tr
                                          %td(style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #333333; text-align:left;line-height: 24px;")
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                                        %tr
                                          %td(style="font-family: Helvetica, arial, sans-serif; font-size: 14px; font-weight:bold; color: #333333; text-align:left;line-height: 24px;")
                                            %a(href="#" style="color:#9ec459;text-decoration:none;font-weight:bold;")
                                              Read More
                                %tr
                                  %td(width="100%" height="10") 
    %table(width="100%" bgcolor="#f5f5f5" cellpadding="0" cellspacing="0" border="0" id="backgroundTable")
      %tbody
        %tr
          %td
            %table(width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" style="margin: 0 auto;")
              %tbody
                %tr
                  %td(width="100%")
                    %table(bgcolor="#ffffff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth")
                      %tbody
                        %tr
                          %td
                            %table(width="290" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth") 
                              %tbody
                                %tr
                                  %td(width="100%" height="10")
                                %tr
                                  %td
                                    %table(width="270" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner")
                                      %tbody
                                        %tr
                                          %td(width="270" height="150" align="center" class="devicewidth")
                                            %img(src="http://lorempixel.com/270/150/" alt="" border="0" width="270" height="150" style="display:block; border:none; outline:none; text-decoration:none;" class="colimg2")
                                        %tr
                                          %td(width="100%" height="10")
                                        %tr
                                          %td(style="font-family: Helvetica, arial, sans-serif; font-size: 14px; font-weight:bold; color: #333333; text-align:left;line-height: 24px;")
                                            Lorem ipsum dolor sit
                                        %tr
                                          %td(width="100%" height="10")
                                        %tr
                                          %td(style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #333333; text-align:left;line-height: 24px;")
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                                        %tr
                                          %td(style="font-family: Helvetica, arial, sans-serif; font-size: 14px; font-weight:bold; color: #333333; text-align:left;line-height: 24px;")
                                            %a(href="#" style="color:#9ec459;text-decoration:none;font-weight:bold;")
                                              Read More
                                        %tr
                                          %td(width="100%" height="10") 
                            %table(width="290" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth")
                              %tbody
                                %tr
                                  %td(width="100%" height="10")
                                %tr
                                  %td
                                    %table(width="270" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner")
                                      %tbody
                                        %tr
                                          %td(width="270" height="150" align="center" class="devicewidth")
                                            %img(src="http://lorempixel.com/270/150/" alt="" border="0" width="270" height="150" style="display:block; border:none; outline:none; text-decoration:none;" class="colimg2") 
                                        %tr
                                          %td(width="100%" height="10") 
                                        %tr
                                          %td(style="font-family: Helvetica, arial, sans-serif; font-size: 14px; font-weight:bold; color: #333333; text-align:left;line-height: 24px;")
                                            Lorem ipsum dolor sit
                                        %tr
                                          %td(width="100%" height="10") 
                                        %tr
                                          %td(style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #333333; text-align:left;line-height: 24px;")
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                                        %tr
                                          %td(style="font-family: Helvetica, arial, sans-serif; font-size: 14px; font-weight:bold; color: #333333; text-align:left;line-height: 24px;")
                                            %a(href="#" style="color:#9ec459;text-decoration:none;font-weight:bold;")
                                              Read More
                                %tr
                                  %td(width="100%" height="10")
    %table( width="100%" bgcolor="#f5f5f5" cellpadding="0" cellspacing="0" border="0" id="backgroundTable")
      %tbody
        %tr
          %td
            %table(width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" style="margin: 0 auto;")
              %tbody
                %tr
                  %td(width="100%")
                    %table(bgcolor="#ffffff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth")
                      %tbody
                        %tr
                          %td(width="100%" height="20")
                            %tr
                              %td
                                %table(width="560" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidthinner")
                                  %tbody
                                    %tr
                                      %td(style="font-family: Helvetica, arial, sans-serif; font-size: 14px; font-weight:bold; color: #333333; text-align:left;line-height: 24px;")
                                        Lorem ipsum dolor sit
                                    %tr
                                      %td(height="5")
                                    %tr
                                      %td(style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #333333; text-align:left;line-height: 24px;")
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                    %tr
                                      %td(width="100%" height="5")
                                    %tr
                                      %td(style="font-family: Helvetica, arial, sans-serif; font-size: 14px; font-weight:bold; color: #333333; text-align:left;line-height: 24px;")
                                        %a(href="#" style="color:#9ec459;text-decoration:none;font-weight:bold;")
                                          Read More
                                    %tr
                                      %td(width="100%" height="20")