style.sass

p {
    margin : 10px 0;
    padding: 0;
}
table {
    border-collapse: collapse;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    display: block;
    margin : 0;
    padding: 0;
}
img,
a img {
    border         : 0;
    height         : auto;
    outline        : none;
    text-decoration: none;
}
body,
#bodyTable,
#bodyCell {
    height : 100%;
    margin : 0;
    padding: 0;
    width  : 100%;
}
#outlook a {
    padding: 0;
}
img {
    -ms-interpolation-mode: bicubic;
}
table {
    mso-table-lspace: 0;
    mso-table-rspace: 0;
}
.ReadMsgBody {
    width: 100%;
}
.ExternalClass {
    width: 100%;
}
p,
a,
li,
td,
blockquote {
    mso-line-height-rule: exactly;
}
a[href^=tel],
a[href^=sms] {
    color          : inherit;
    cursor         : default;
    text-decoration: none;
}
p,
a,
li,
td,
body,
table,
blockquote {
    -ms-text-size-adjust    : 100%;
    -webkit-text-size-adjust: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass td,
.ExternalClass div,
.ExternalClass span,
.ExternalClass font {
    line-height: 100%;
}
a[x-apple-data-detectors] {
    color          : inherit !important;
    text-decoration: none !important;
    font-size      : inherit !important;
    font-family    : inherit !important;
    font-weight    : inherit !important;
    line-height    : inherit !important;
}
.templateContainer {
    max-width: 600px !important;
}
a.mcnButton {
    display: block;
}
.mcnImage {
    vertical-align: bottom;
}
.mcnTextContent {
    word-break: break-word;
}
.mcnTextContent img {
    height: auto !important;
}
.mcnDividerBlock {
    table-layout: fixed !important;
}
body,
#bodyTable {
    /*@editable*/
    background-color: #1a5077;
}
#bodyCell {
    /*@editable*/
    border-top: 0;
}
h1 {
    /*@editable*/
    color         : #fff;
    /*@editable*/
    font-family   : Helvetica;
    /*@editable*/
    font-size     : 28px;
    /*@editable*/
    font-style    : normal;
    /*@editable*/
    font-weight   : normal;
    /*@editable*/
    line-height   : 200%;
    /*@editable*/
    letter-spacing: normal;
    /*@editable*/
    text-align    : center;
}
h2 {
    /*@editable*/
    color         : #1a5077;
    /*@editable*/
    font-family   : Helvetica;
    /*@editable*/
    font-size     : 22px;
    /*@editable*/
    font-style    : normal;
    /*@editable*/
    font-weight   : normal;
    /*@editable*/
    line-height   : 200%;
    /*@editable*/
    letter-spacing: normal;
    /*@editable*/
    text-align    : left;
}
h3 {
    /*@editable*/
    color         : #fff;
    /*@editable*/
    font-family   : Helvetica;
    /*@editable*/
    font-size     : 18px;
    /*@editable*/
    font-style    : normal;
    /*@editable*/
    font-weight   : normal;
    /*@editable*/
    line-height   : 125%;
    /*@editable*/
    letter-spacing: normal;
    /*@editable*/
    text-align    : center;
}
h4 {
    /*@editable*/
    color         : #202020;
    /*@editable*/
    font-family   : Helvetica;
    /*@editable*/
    font-size     : 18px;
    /*@editable*/
    font-style    : normal;
    /*@editable*/
    font-weight   : bold;
    /*@editable*/
    line-height   : 125%;
    /*@editable*/
    letter-spacing: normal;
    /*@editable*/
    text-align    : left;
}
#templatePreheader {
    /*@editable*/
    background-color: #1a5077;
    /*@editable*/
    border-top      : 0;
    /*@editable*/
    border-bottom   : 0;
    /*@editable*/
    padding-top     : 10px;
    /*@editable*/
    padding-bottom  : 0;
}
#templatePreheader .mcnTextContent,
#templatePreheader .mcnTextContent p {
    /*@editable*/
    color      : #fff;
    /*@editable*/
    font-family: Helvetica;
    /*@editable*/
    font-size  : 12px;
    /*@editable*/
    line-height: 200%;
    /*@editable*/
    text-align : left;
}
#templatePreheader .mcnTextContent a,
#templatePreheader .mcnTextContent p a {
    /*@editable*/
    color          : #fff;
    /*@editable*/
    font-weight    : normal;
    /*@editable*/
    text-decoration: none;
}
#templateHeader {
    /*@editable*/
    background-color: #1a5077;
    /*@editable*/
    border-top      : 0;
    /*@editable*/
    border-bottom   : 0;
    /*@editable*/
    padding-top     : 0;
    /*@editable*/
    padding-bottom  : 0;
}
#templateHeader .mcnTextContent,
#templateHeader .mcnTextContent p {
    /*@editable*/
    color      : #fff;
    /*@editable*/
    font-family: Helvetica;
    /*@editable*/
    font-size  : 16px;
    /*@editable*/
    line-height: 100%;
    /*@editable*/
    text-align : center;
}
#templateHeader .mcnTextContent a,
#templateHeader .mcnTextContent p a {
    /*@editable*/
    color          : #fff;
    /*@editable*/
    font-weight    : normal;
    /*@editable*/
    text-decoration: underline;
}
#templateBody {
    /*@editable*/
    background-color: #fff;
    /*@editable*/
    border-top      : 0;
    /*@editable*/
    border-bottom   : 0;
    /*@editable*/
    padding-top     : 9px;
    /*@editable*/
    padding-bottom  : 80px;
}
#templateBody .mcnTextContent,
#templateBody .mcnTextContent p {
    /*@editable*/
    color      : #b0b0b0;
    /*@editable*/
    font-family: Helvetica;
    /*@editable*/
    font-size  : 16px;
    /*@editable*/
    line-height: 150%;
    /*@editable*/
    text-align : left;
}
#templateBody .mcnTextContent a,
#templateBody .mcnTextContent p a {
    /*@editable*/
    color          : #00bcfc;
    /*@editable*/
    font-weight    : normal;
    /*@editable*/
    text-decoration: none;
}
#templateFooter {
    /*@editable*/
    background-color: #1a5077;
    /*@editable*/
    border-top      : 0;
    /*@editable*/
    border-bottom   : 0;
    /*@editable*/
    padding-top     : 25px;
    /*@editable*/
    padding-bottom  : 9px;
}
/*
@tab Footer
@section Footer Text
@tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
*/
#templateFooter .mcnTextContent,
#templateFooter .mcnTextContent p {
    /*@editable*/
    color      : #fff;
    /*@editable*/
    font-family: Helvetica;
    /*@editable*/
    font-size  : 12px;
    /*@editable*/
    line-height: 200%;
    /*@editable*/
    text-align : center;
}
#templateFooter .mcnTextContent a,
#templateFooter .mcnTextContent p a {
    /*@editable*/
    color          : #656565;
    /*@editable*/
    font-weight    : normal;
    /*@editable*/
    text-decoration: underline;
}
@media only screen and (min-width:768px) {
    .templateContainer {
        width: 600px !important;
    }
}
@media only screen and (max-width: 480px) {
    body,
    table,
    td,
    p,
    a,
    li,
    blockquote {
        -webkit-text-size-adjust: none !important;
    }
}
@media only screen and (max-width: 480px) {
    body {
        width    : 100% !important;
        min-width: 100% !important;
    }
}
@media only screen and (max-width: 480px) {
    #bodyCell {
        padding-top: 10px !important;
    }
}
@media only screen and (max-width: 480px) {
    .mcnImage {
        width: 100% !important;
    }
}
@media only screen and (max-width: 480px) {
    .mcnCaptionTopContent,
    .mcnCaptionBottomContent,
    .mcnTextContentContainer,
    .mcnBoxedTextContentContainer,
    .mcnImageGroupContentContainer,
    .mcnCaptionLeftTextContentContainer,
    .mcnCaptionRightTextContentContainer,
    .mcnCaptionLeftImageContentContainer,
    .mcnCaptionRightImageContentContainer,
    .mcnImageCardLeftTextContentContainer,
    .mcnImageCardRightTextContentContainer {
        max-width: 100% !important;
        width    : 100% !important;
    }
}
@media only screen and (max-width: 480px) {
    .mcnBoxedTextContentContainer {
        min-width: 100% !important;
    }
}
@media only screen and (max-width: 480px) {
    .mcnImageGroupContent {
        padding: 9px !important;
    }
}
@media only screen and (max-width: 480px) {
    .mcnCaptionLeftContentOuter .mcnTextContent,
    .mcnCaptionRightContentOuter .mcnTextContent {
        padding-top: 9px !important;
    }
}
@media only screen and (max-width: 480px) {
    .mcnImageCardTopImageContent,
    .mcnCaptionBlockInner .mcnCaptionTopContent:last-child .mcnTextContent {
        padding-top: 18px !important;
    }
}
@media only screen and (max-width: 480px) {
    .mcnImageCardBottomImageContent {
        padding-bottom: 9px !important;
    }
}
@media only screen and (max-width: 480px) {
    .mcnImageGroupBlockInner {
        padding-top   : 0 !important;
        padding-bottom: 0 !important;
    }
}
@media only screen and (max-width: 480px) {
    .mcnImageGroupBlockOuter {
        padding-top   : 9px !important;
        padding-bottom: 9px !important;
    }
}
@media only screen and (max-width: 480px) {
    .mcnTextContent,
    .mcnBoxedTextContentColumn {
        padding-right: 18px !important;
        padding-left : 18px !important;
    }
}
@media only screen and (max-width: 480px) {
    .mcnImageCardLeftImageContent,
    .mcnImageCardRightImageContent {
        padding-right : 18px !important;
        padding-bottom: 0 !important;
        padding-left  : 18px !important;
    }
}
@media only screen and (max-width: 480px) {
    .mcpreview-image-uploader {
        display: none !important;
        width  : 100% !important;
    }
}
@media only screen and (max-width: 480px) {
    h1 {
        /*@editable*/
        font-size  : 22px !important;
        /*@editable*/
        line-height: 125% !important;
    }
}
@media only screen and (max-width: 480px) {
    h2 {
        /*@editable*/
        font-size  : 20px !important;
        /*@editable*/
        line-height: 125% !important;
    }
}
@media only screen and (max-width: 480px) {
    h3 {
        /*@editable*/
        font-size  : 18px !important;
        /*@editable*/
        line-height: 125% !important;
    }
}
@media only screen and (max-width: 480px) {
    h4 {
        /*@editable*/
        font-size  : 16px !important;
        /*@editable*/
        line-height: 150% !important;
    }
}
@media only screen and (max-width: 480px) {
    .mcnBoxedTextContentContainer .mcnTextContent,
    .mcnBoxedTextContentContainer .mcnTextContent p {
        /*@editable*/
        font-size  : 14px !important;
        /*@editable*/
        line-height: 150% !important;
    }
}
@media only screen and (max-width: 480px) {
    #templatePreheader {
        /*@editable*/
        display: block !important;
    }
}
@media only screen and (max-width: 480px) {
    #templatePreheader .mcnTextContent,
    #templatePreheader .mcnTextContent p {
        /*@editable*/
        font-size  : 14px !important;
        /*@editable*/
        line-height: 150% !important;
    }
}
@media only screen and (max-width: 480px) {
    #templateHeader .mcnTextContent,
    #templateHeader .mcnTextContent p {
        /*@editable*/
        font-size  : 16px !important;
        /*@editable*/
        line-height: 150% !important;
    }
}
@media only screen and (max-width: 480px) {
    #templateBody .mcnTextContent,
    #templateBody .mcnTextContent p {
        /*@editable*/
        font-size  : 16px !important;
        /*@editable*/
        line-height: 150% !important;
    }
}
@media only screen and (max-width: 480px) {
    #templateFooter .mcnTextContent,
    #templateFooter .mcnTextContent p {
        /*@editable*/
        font-size  : 14px !important;
        /*@editable*/
        line-height: 150% !important;
    }
}