/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
#outlook a {
    padding: 0;
}

/* Force Outlook to provide a "view in browser" message */
.ReadMsgBody {
    width: 100%;
}

.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 */
body, table, td, p, a, li, blockquote {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Prevent WebKit and Windows mobile changing default text sizes */
table, td {
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
}

/* Remove spacing between tables in Outlook 2007 and up */
img {
    -ms-interpolation-mode: bicubic;
}

/* Allow smoother rendering of resized image in Internet Explorer */

/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body {
    margin: 0;
    padding: 0;
}

img {
    border: 0;
    height: auto;
    line-height: 100%;
    outline: none;
    text-decoration: none;
}

table {
    border-collapse: collapse !important;
}

body, #bodyTable, #bodyCell {
    height: 100% !important;
    margin: 0;
    padding: 0;
    width: 100% !important;
}

/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */

/* ========== Page Styles ========== */

#bodyCell {
    padding: 20px;
}

#templateContainer {
    width: 600px;
}

/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
body, #bodyTable {
    background-color: #DEE0E2;
}

/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
#bodyCell {
    border-top: 4px solid #BBBBBB;
}

/**
* @tab Page
* @section email border
* @tip Set the border for your email.
*/
#templateContainer {
    border: 1px solid #BBBBBB;
}

/**
* @tab Page
* @section heading 1
* @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
* @style heading 1
*/
h1 {
    color: #202020 !important;
    display: block;
    font-family: Helvetica;
    font-size: 26px;
    font-style: normal;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: normal;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 10px;
    margin-left: 0;
    text-align: left;
}

/**
* @tab Page
* @section heading 2
* @tip Set the styling for all second-level headings in your emails.
* @style heading 2
*/
h2 {
    color: #404040 !important;
    display: block;
    font-family: Helvetica;
    font-size: 20px;
    font-style: normal;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: normal;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 10px;
    margin-left: 0;
    text-align: left;
}

/**
* @tab Page
* @section heading 3
* @tip Set the styling for all third-level headings in your emails.
* @style heading 3
*/
h3 {
    color: #606060 !important;
    display: block;
    font-family: Helvetica;
    font-size: 16px;
    font-style: italic;
    font-weight: normal;
    line-height: 100%;
    letter-spacing: normal;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 10px;
    margin-left: 0;
    text-align: left;
}

h4 {
    color: #808080 !important;
    display: block;
    font-family: Helvetica;
    font-size: 14px;
    font-style: italic;
    font-weight: normal;
    line-height: 100%;
    letter-spacing: normal;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 10px;
    margin-left: 0;
    text-align: left;
}

/* ========== Header Styles ========== */

/**
* @tab Header
* @section preheader style
* @tip Set the background color and bottom border for your email's preheader area.
* @theme header
*/
#templatePreheader {
    background-color: #F4F4F4;
    border-bottom: 1px solid #CCCCCC;
}

/**
* @tab Header
* @section preheader text
* @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
*/
.preheaderContent {
    color: #808080;
    font-family: Helvetica;
    font-size: 10px;
    line-height: 125%;
    text-align: left;
}

/**
* @tab Header
* @section preheader link
* @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
*/
.preheaderContent a:link, .preheaderContent a:visited, /* Yahoo! Mail Override */
.preheaderContent a .yshortcuts /* Yahoo! Mail Override */
{
    color: #606060;
    font-weight: normal;
    text-decoration: underline;
}

/**
* @tab Header
* @section header style
* @tip Set the background color and borders for your email's header area.
* @theme header
*/
#templateHeader {
    background-color: #F4F4F4;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #CCCCCC;
}

/**
* @tab Header
* @section header text
* @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
*/
.headerContent {
    color: #505050;
    font-family: Helvetica;
    font-size: 20px;
    font-weight: bold;
    line-height: 100%;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    text-align: left;
    vertical-align: middle;
}

/**
* @tab Header
* @section header link
* @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
*/
.headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */
.headerContent a .yshortcuts /* Yahoo! Mail Override */
{
    color: #EB4102;
    font-weight: normal;
    text-decoration: underline;
}

#headerImage {
    height: auto;
    max-width: 600px;
}

/* ========== Body Styles ========== */

/**
* @tab Body
* @section body style
* @tip Set the background color and borders for your email's body area.
*/
#templateBody {
    background-color: #F4F4F4;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #CCCCCC;
}

/**
* @tab Body
* @section body text
* @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
* @theme main
*/
.bodyContent {
    color: #505050;
    font-family: Helvetica;
    font-size: 14px;
    line-height: 150%;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    text-align: left;
}

/**
* @tab Body
* @section body link
* @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */
.bodyContent a .yshortcuts /* Yahoo! Mail Override */
{
    color: #EB4102;
    font-weight: normal;
    text-decoration: underline;
}

.bodyContent img {
    display: inline;
    height: auto;
    max-width: 560px;
}

/* ========== Footer Styles ========== */

/**
* @tab Footer
* @section footer style
* @tip Set the background color and borders for your email's footer area.
* @theme footer
*/
#templateFooter {
    background-color: #F4F4F4;
    border-top: 1px solid #FFFFFF;
}

/**
* @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.
* @theme footer
*/
.footerContent {
    color: #808080;
    font-family: Helvetica;
    font-size: 10px;
    line-height: 150%;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    text-align: left;
}

/**
* @tab Footer
* @section footer link
* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
.footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */
.footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */
{
    color: #606060;
    font-weight: normal;
    text-decoration: underline;
}

/* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */

@media only screen and (max-width: 480px) {
    /* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
    body, table, td, p, a, li, blockquote {
        -webkit-text-size-adjust: none !important;
    }

    /* Prevent Webkit platforms from changing default text sizes */
    body {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* Prevent iOS Mail from adding padding to the body */
    /* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
    #bodyCell {
        padding: 10px !important;
    }

    /* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
    /* ======== Page Styles ======== */
    /**
    * @tab Mobile Styles
    * @section template width
    * @tip Make the template fluid for portrait or landscape view adaptability. If a fluid layout doesn't work for you, set the width to 300px instead.
    */
    #templateContainer {
        max-width: 600px !important;
        width: 100% !important;
    }

    /**
    * @tab Mobile Styles
    * @section heading 1
    * @tip Make the first-level headings larger in size for better readability on small screens.
    */
    h1 {
        font-size: 24px !important;
        line-height: 100% !important;
    }

    /**
    * @tab Mobile Styles
    * @section heading 2
    * @tip Make the second-level headings larger in size for better readability on small screens.
    */
    h2 {
        font-size: 20px !important;
        line-height: 100% !important;
    }

    /**
    * @tab Mobile Styles
    * @section heading 3
    * @tip Make the third-level headings larger in size for better readability on small screens.
    */
    h3 {
        font-size: 18px !important;
        line-height: 100% !important;
    }

    /**
    * @tab Mobile Styles
    * @section heading 4
    * @tip Make the fourth-level headings larger in size for better readability on small screens.
    */
    h4 {
        font-size: 16px !important;
        line-height: 100% !important;
    }

    /* ======== Header Styles ======== */
    #templatePreheader {
        display: none !important;
    }

    /* Hide the template preheader to save space */
    /**
    * @tab Mobile Styles
    * @section header image
    * @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
    */
    #headerImage {
        height: auto !important;
        max-width: 600px !important;
        width: 100% !important;
    }

    /**
    * @tab Mobile Styles
    * @section header text
    * @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
    */
    .headerContent {
        font-size: 20px !important;
        line-height: 125% !important;
    }

    /* ======== Body Styles ======== */
    /**
    * @tab Mobile Styles
    * @section body text
    * @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
    */
    .bodyContent {
        font-size: 18px !important;
        line-height: 125% !important;
    }

    /* ======== Footer Styles ======== */
    /**
    * @tab Mobile Styles
    * @section footer text
    * @tip Make the body content text larger in size for better readability on small screens.
    */
    .footerContent {
        font-size: 14px !important;
        line-height: 115% !important;
    }

    .footerContent a {
        display: block !important;
    }

    /* Place footer social and utility links on their own lines, for easier access */
}
