$fontFamily: Helvetica Neue, Helvetica, Arial, Helvetica, serif; /* Mobile-specific Styles */ @media only screen and (max-device-width: 480px) { //@media only screen and (max-width: 5480px) { table[class=w0], td[class=w0] { width: 0 !important; } table[class=w10], td[class=w10], img[class=w10] { width: 10px !important; } table[class=w15], td[class=w15], img[class=w15] { width: 5px !important; } table[class=w30], td[class=w30], img[class=w30], table[class=w50], td[class=w50], img[class=w50], table[class=w60], td[class=w60], img[class=w60] { width: 10px !important; } table[class=w125], td[class=w125], img[class=w125] { width: 80px !important; } table[class=w130], td[class=w130], img[class=w130] { width: 55px !important; } table[class=w140], td[class=w140], img[class=w140] { width: 90px !important; } table[class=w160], td[class=w160], img[class=w160] { width: 180px !important; } table[class=w170], td[class=w170], img[class=w170] { width: 100px !important; } table[class=w180], td[class=w180], img[class=w180], table[class=w195], td[class=w195], img[class=w195], table[class=w220], td[class=w220], img[class=w220] { width: 80px !important; } table[class=w240], td[class=w240], img[class=w240] { width: 180px !important; } table[class=w255], td[class=w255], img[class=w255] { width: 185px !important; } table[class=w275], td[class=w275], img[class=w275], table[class=w280], td[class=w280], img[class=w280] { width: 135px !important; } table[class=w300], td[class=w300], img[class=w300] { width: 140px !important; } table[class=w325], td[class=w325], img[class=w325] { width: 95px !important; } table[class=w360], td[class=w360], img[class=w360] { width: 140px !important; } table[class=w410], td[class=w410], img[class=w410] { width: 180px !important; } table[class=w470], td[class=w470], img[class=w470] { width: 200px !important; } table[class=w560], td[class=w560], img[class=w560], table[class=w580], td[class=w580], img[class=w580] { width: 280px !important; } table[class=w640], td[class=w640], img[class=w640] { width: 300px !important; } .mobile_only { display: block !important; max-height: none !important; font-size: 12px !important; } .large_only { display: none !important; } #superheading { width: 560px !important; } #logo { display: none !important; } #logo img { padding-bottom: 20px; } table[class=hide], td[class=hide], img[class=hide], p[class=hide], span[class=hide], .hide { display: none !important; } #customHeaderImageArea { text-align: center !important; } #toppbild, #mellanbild { height: auto; } table[class=h0], td[class=h0] { height: 0 !important; } p[class=footer-content-left] { text-align: left !important; } #headline p { font-size: 30px !important; } } @media all and (min-device-pixel-ratio: 1.5) { #background-table, body { background: url("/images/bg_2x.png") !important; background-size: 106px 142px !important; } } #superheading { width: 360px; font-size: 26px; } #superheading font { font-size: 26px; color: #333; text-align: left; } #superheading h1 { margin: 0; padding: 0; } #logo { width: 195px; } .mobile_only { display: none; max-height: 0px; font-size: 0; } .large_only { display: block; } /* Client-specific Styles */ #outlook a { padding: 0; } /* Force Outlook to provide a "view in browser" button. */ body { width: 100% !important; } .ReadMsgBody { width: 100%; } .ExternalClass { width: 100%; display: block !important; } /* Force Hotmail to display emails at full width */ /* Reset Styles */ /* Add 100px so mobile switch bar doesn't cover street address. */ html, body { background-color: #F7F7F7; margin: 0; padding: 0; } img { /*height: auto;*/ line-height: 100%; outline: none; text-decoration: none; display: block; max-width: 100%; } #footer img { display: inline; } br, strong br, b br, em br, i br { line-height: 100%; } h1, h2, h3, h4, h5, h6 { font-family: $fontFamily; font-weight: 300; line-height: 130% !important; -webkit-font-smoothing: antialiased; color: #333; text-align: left; margin: 0; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: blue !important; } h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active { color: red !important; } /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */ h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: purple !important; } /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */ table td, table tr { border-collapse: collapse; } .yshortcuts { color: black; text-decoration: none !important; border-bottom: none !important; background: none !important; } .yshortcuts a { color: black; text-decoration: none !important; border-bottom: none !important; background: none !important; } .yshortcuts a:link, .yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span { color: black; text-decoration: none !important; border-bottom: none !important; background: none !important; } /* Body text color for the New Yahoo. This example sets the font of Yahoo's Shortcuts to black. */ #background-table { background-color: #F7F7F7; } /* Webkit Elements */ #top-bar { border-radius: 6px 6px 0px 0px; -moz-border-radius: 6px 6px 0px 0px; -webkit-border-radius: 6px 6px 0px 0px; -webkit-font-smoothing: antialiased; background: url("bg2.png"); background-color: #ffffff; color: #7d7b7d; } #top-bar a { font-weight: normal; color: #7D7B7D; text-decoration: none; } #footer { border-radius: 0px 0px 6px 6px; -moz-border-radius: 0px 0px 6px 6px; -webkit-border-radius: 0px 0px 6px 6px; -webkit-font-smoothing: antialiased; } /* Fonts and Content */ body { font-family: $fontFamily } body p { font-weight: 400; } strong { font-weight: 600; } .header-content, .footer-content-left, .footer-content-right { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; } /* Prevent Webkit and Windows Mobile platforms from changing default font sizes on header and footer. */ .header-content { font-size: 12px; color: #7d7b7d; } .header-content a { font-weight: bold; color: #eeeeee; text-decoration: none; } #headline p { color: #eeeeee; font-family: $fontFamily; font-size: 36px; text-align: left; margin-top: 0px; margin-bottom: 30px; } #headline p a { color: #eeeeee; text-decoration: none; } .article-title { font-size: 14px; color: #ffffff; font-weight: normal; margin-top: 0px; margin-bottom: 0px; background: #f26728; display: block; padding: 0px 5px 0px 10px; text-transform: uppercase; letter-spacing: .071em; line-height: 22px; height: 22px; } .article-title a { color: #f26728; text-decoration: none; } .article-content { font-size: 14px; line-height: 20px; color: #5e5b5b; margin-top: 0px; margin-bottom: 0px; } .article-content a { color: #f26728; font-weight: bold; text-decoration: none; font-weight: 600; } .article-content a:hover { text-decoration: underline; } .article-content ol, .article-content ul { margin-top: 0px; margin-bottom: 18px; margin-left: 19px; padding: 0; } .article-content li { font-size: 13px; line-height: 20px; color: #444444; } .article-content li a { color: #f26728; text-decoration: underline; } .article-content p { margin-top: 0; padding-top: 0; } .footer-content-left { font-size: 12px; line-height: 15px; color: #8f8f8f; margin-top: 15px; margin-bottom: 15px; } .footer-content-left a { color: #8F8F8F; font-weight: bold; text-decoration: none; } .footer-content-right { font-size: 11px; color: #8f8f8f; margin-top: 0px; } .footer-content-right a { color: #8F8F8F; font-weight: bold; text-decoration: none; } #footer { background-color: #ffffff; color: #8f8f8f; } #footer a { color: #8F8F8F; text-decoration: none; font-weight: bold; } #permission-reminder { white-space: pre-wrap; font-weight: 400; } #street-address { color: #ffffff; white-space: pre-wrap; }