!!! Strict
%html{:xmlns => "http://www.w3.org/1999/xhtml"}
	%head
		%meta{:content => "text/html; charset=utf-8", "http-equiv" => "Content-Type"}/
		%meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}/
		%title Your Message Subject or Title
		: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; -ms-interpolation-mode: bicubic;}
			a img {border:none;}
			.image_fix {display:block;max-width:100%}
			p {margin: 1em;color:#333 !important;}
			h1, h2, h3, h4, h5, h6 {color:#333 !important;}
			h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: #00ADEF !important;}
			h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active { color: #D89E59 !important; }
			h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: #DD57EF !important; }
			table td {border-collapse: collapse;}
			table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; max-width:512px;min-width:280px;}
			a {color: #00ADEF;}
			a:link { color: #00ADEF; }
			a:visited { color: #00ADEF; }
			a:hover { color: #02CA9E; }
			@media only screen and (max-device-width: 480px) {
			a[href^="tel"], a[href^="sms"] {
						text-decoration: none;
						color: #333;
						pointer-events: none;
						cursor: default;
					}
			.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
						text-decoration: default;
						color: #00ADEF !important;
						pointer-events: auto;
						cursor: default;
					}
			}
			@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
			a[href^="tel"], a[href^="sms"] {
						text-decoration: none;
						color: #00ADEF;
						pointer-events: none;
						cursor: default;
					}
			.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
						text-decoration: default;
						color: #00ADEF !important;
						pointer-events: auto;
						cursor: default;
					}
			}
	%body
		%table#backgroundTable{:border => "0", :cellpadding => "0", :cellspacing => "0"}
			%tr
				%td
					%table{:align => "center", :border => "0", :cellpadding => "0", :cellspacing => "0"}
						- if @banner
							%tr
								%td{:valign => "top", :style => 'text-align: center', colspan: 2}
									%img.image_fix{:src => @banner}
						%tr
							%td{:valign => "top", colspan: 2}= yield
						%tr
							%td{colspan: 2, style: 'height: 16px'}=' '.html_safe
						%tr
							%td{style: 'width: 50%; text-align: left'}
								%img.image_fix{:src => (@host + image_url('bblogo-paypal'))}
							%td{style: 'width: 50%; text-align: left'}
								%a{href: @host}="© Bike!Bike! #{Date.today.year}".html_safe
						%tr
							%td{colspan: 2, style: 'height: 16px'}=' '.html_safe