/*-------------------------------------------------------------------------
 = View & Preview Pages
 --------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins, kbd,
q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol,
ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
    border: 0px none;
    margin: 0px;
    padding: 0px;
}

html,
body {
    height: 100%;
}

body#jl-viewcard {
    font-size: 0;
    line-height: 0;
}

body#jl-viewcard,
#FlashProduct_div {
    height: 100%;
    margin: 0px;
    width: 100%;
}

body#jl-viewcard .jl-base #jl-wrapper {
    margin-top: 0;
    width: auto;
}

body#jl-preview #jl-wrapper.mobile {
    margin: 0;
}

body#jl-viewcard #jl-tnxyou #jl-wrapper.mobile #jl-prod-content {
    margin: auto;
    width: 640px;
}

body#jl-viewcard #jl-tnxyou #jl-wrapper.mobile {
    margin: auto;
    width: 800px;
}

body#jl-viewcard #jl-wrapper.mobile #jl-prod-content {
    margin: auto;
    width: 640px;
}

body#jl-viewcard .mobile #caption,
body#jl-viewcard .mobile #expression-jl-caption {
    font-size: 2.667rem;
    line-height: 2.667rem;
    margin: 0 0 25px 0;
    padding-top: 25px;
    text-align: center;
}

body#jl-viewcard .mobile #reply_message,
body#jl-viewcard .mobile #expression-user-message {
    font-family: 'jaxfont2', serif;
    font-size: 1.667rem;
    line-height: 2.167rem;
    margin: 20px;
    text-align: center;
}

body#jl-viewcard .mobile a#copyright {
    float: right;
}

body#jl-viewcard .mobile .action-options {
    font-family: 'jaxfont2', serif;
    font-size: 1.333rem;
    line-height: 1.5rem;
    margin-top: 10px;
}

body#jl-viewcard .mobile a#sendreply {
    margin: 0 30px 0 5px;
}

body#jl-viewcard #footer {
    line-height: normal;
    font-size: 1rem;
}

body#jl-viewcard #jl-sendreply {
    margin: 0 auto;
}

body#jl-viewcard p.intro {
    font-weight: bold;
    margin: 0;
    padding: 20px;
}

#pickup-cta,
#jl-preview-cb {
    text-align: center;
}

#jl-preview .jl-flash,
#jl-viewcard .jl-flash,
#jl-viewcardm .jl-flash,
#jl-premiere .jl-flash,
#jl-ecardsurvey .jl-flash {
    margin: 0px auto;
    position: relative;
    width: 100%;
}

#FlashProduct_div #header,
#FlashProduct_div .container {
    text-align: left;
}

.gift-section #gift-redeem {
    color: #006;
    font-size: 1.7rem;
    font-weight: bold;
    text-decoration: underline;
}

.gift-section {
    display: flex;
    justify-content: center;
    margin: 1%;
}

.gift-section #gift-redeem {
    padding: 8px;
}

.gift-section img {
    height: 22px;
    margin: auto 0;
}

/*--------------------------------------------------------------------------
=Containers
--------------------------------------------------------------------------*/

#notecard-content,
#preview-cardcontent,
.product-main .product-html-div,
#christmasletter-content {
    padding-bottom: 0;
    text-align: center;
}

#preview-cardcontent.preview-nobuttons {
    height: 100vh;
    padding-bottom: 0;
}

body#jl-preview #jl-wrapper.mobile.bc-card-content,
.bc-card-content {
    height: inherit;
    padding-bottom: 2vh;
    text-align: center;
}

.bc-nobuttons {
    min-height: 98vh;
    padding-bottom: 2vh;
    text-align: center;
}

div.action-options {
    min-height: 5vh;
    margin-top: 0;
    padding: 1vh 0;
    text-align: center;
}

/*--------------------------------------------------------------------------
=Product
--------------------------------------------------------------------------*/
#jl-preview .jl-flash {
    height: 94%; /*temporary til content updated*/
    text-align: center;
}

#jl-viewcard .jl-flash,
#jl-viewcardm .jl-flash,
#jl-premiere .jl-flash {
    height: 100%;
}

#jl-preview,
#jl-viewcard,
#jl-viewcardm,
#jl-premiere {
    font-size: 0;
    line-height: normal;
    width: 100%;
}

#jl-preview,
#jl-viewcard,
#jl-viewcardm,
#jl-premiere .download-app {
    font-size: inherit;
    text-align: center;
}

/*--------------------------------------------------------------------------
=Buttons
--------------------------------------------------------------------------*/
#jl-button {
    position: relative;
}

.jl-fontjax {
    margin: 0px auto ;
    padding: 8px 10px 3px 10px;
    width: auto;
}

.jl-fontjax a {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    margin: 0 25px;
    white-space: nowrap;
    width: auto;
}

#jl-viewcard .jl-fontjax,
#jl-viewcardm .jl-fontjax {
    margin: 0px; /*temporary til content updated*/
}

div.action-options button,
div.action-options .mbutton {
    background: none;
    border: 0 none;
    cursor: pointer;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 1.667rem;
    font-weight: bold;
    line-height: 1.833rem;
    margin: 0 25px 25px 25px;
    white-space: nowrap;
    width: auto;
}

.christmasletter-mbuttons .mbutton,
#jl-christmasletterpickup .mbutton,
#jl-christmasletterpickup .nbutton,
#jl-pickup .mbutton,
#jl-preview .mbutton,
#jl-pickup .mbutton,
#jl-preview .nbutton,
#jl-notecardpickup .mbutton,
#jl-notecardpickup .nbutton,
#jl-christmasletterpickup .mbutton,
#jl-christmasletterpickup .nbutton,
.christmasletter-mbuttons .mbutton,
#jl-notecardpreview .mbutton,
#jl-notecardpreview-mobile .nbutton {
    box-sizing: border-box;
    min-width: 295px;
}

/*--------------------------------------------------------------------------
=Noflash
--------------------------------------------------------------------------*/
.container {
    margin: 0px auto;
    padding: 0px 10px;
    position: relative;
    top: 60px;
    width: 580px;
}

.container h2 {
    margin: 10px auto;
}

#jl_express_install.noflash {
    background-color: #d0e5ee;
    font-size: 1rem;
    height: 100%;
    line-height: 1.5rem;
    margin: 0px;
    padding: 0px;
    width: 100%;
}

.intro {
    margin: 0 0 20px;
    overflow: hidden;
    padding-left: 120px;
    position: relative;
    width: 420px;
}

.intro img {
    border: none;
    left: 0px;
    margin-right: 10px;
    position: absolute;
    top: 10px;
    vertical-align: text-top;
}

/*--------------------------------------------------------------------------
=Ecard Survey
--------------------------------------------------------------------------*/
#jl-ecardsurvey #jl-wrapper, #jl-ecardsurvey #surveycard {
    margin: 0 auto;
    padding-bottom: 20px;
    position: relative;
    width: 100%;
}

#jl-ecardsurvey .surveycontainer {
    font-size: 1.167rem;
    padding: 15px 20px;
    text-align: center;
}

#jl-ecardsurvey .surveylink {
    text-align: right;
}

#jl-ecardsurvey .surveycontainer h1 {
    margin: 20px 0;
}

#jl_express_install .container img.ecsurvey-thb {
    display: block;
    margin: 0 auto;
    padding-bottom: 15px;
    text-align: center;
}

/*--------------------------------------------------------------------------
= Premiere
--------------------------------------------------------------------------*/
body#premiere #jl-wrapper {
    margin: 0;
}

body#premiere #page #header {
    min-width: 100%;
}

body#premiere #brightcove #caption {
    font-size: 3rem;
}

/*--------------------------------------------------------------------------
= Mobile Enhancements
--------------------------------------------------------------------------*/
div.no_mobile_experience {
    font-size: 1.083rem;
    line-height: 1.167rem;
    margin: 0 auto 0 auto;
    width: 640px;
}

div.no_mobile_experience h1 {
    margin: 0 0 8px 0;
}

div.no_mobile_experience img {
    display: block;
    margin: 60px auto 0px auto;
}

h1.mobile-alert {
    margin: 20px auto 15px auto;
}

#jl-preview #jl-wrapper.mobile {
    display: inline-block;
    margin: auto;
    text-align: center;
    width: 100%
}

#jl-preview .mobile .action-options.no-copy {
    text-align: center;
}

/*--------------------------------------------------------------------------
= Error Alerts
--------------------------------------------------------------------------*/
.off {
    display: none;
}

#erroralert,
.alertboxbg {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.alertboxbg {
    background: none repeat scroll 0 0 #d0e5ee;
    opacity: 0.6;
    position: fixed;
}

#erroralertbox {
    background-color: #bed6de;
    border: 1px solid #df8c5e;
    color: #000000;
    margin: 174px auto auto;
    max-width: 310px;
    position: relative;
    text-align: center;
}

#top-bar {
    background-color: #df8c5e;
    height: 22px;
    max-width: 310px;
    position: relative;
}

#close-window {
    color: #000066;
    cursor: pointer;
    float: right;
    margin: 4px 16px auto;
    position: relative;
    text-decoration: none;
}

#close-window div,
#close-window img {
    float: left;
    margin-right: 4px;
}

.alerttext {
    margin: 12px 6px;
}

/*--------------------------------------------------------------------------
= Footer
--------------------------------------------------------------------------*/
#jl-preview #footer,
#jl-notecardpreview #footer,
#jl-christmasletterpreview #footer,
#jl-christmasletterview #footer,
#jl-christmasletterpickup #footer,
#jl-viewcardm #footer {
    background: #d0e5ee;
    font-size: 1rem;
    line-height: 1rem;
    padding: 20px 0;
}

#jl-christmasletterview #footer {
    margin-top: 0;
}

#jl-christmasletterpreview-mobile #footer,
#jl-notecardpreview-mobile #footer {
    margin-top: 40px;
}

/*--------------------------------------------------------------------------
= Desktop Preview
--------------------------------------------------------------------------*/
body#jl-preview .mobile p {
    margin: 0;
    padding: 25px 0;
}

body#jl-preview .mobile .action-options {
    margin: 0 auto;
    width: 640px;
}

/*--------------------------------------------------------------------------
= Brightcove Player Specfic
--------------------------------------------------------------------------*/
#caption {
    font-family: 'jaxfont2', serif;
    font-size: 3rem;
    font-weight: normal;
    line-height: normal;
    margin: 0;
    padding: 10px 0;
    position: relative;
}

.no_mobile_experience #preview_message {
    font-family: 'jaxfont2', serif;
    font-size:  1.5rem;
    line-height: 1.75rem;
    max-width: 1024px;
    padding: 25px 0;
    white-space: pre-wrap;
    word-break: break-word;
    word-wrap: break-word;
}

#jl-preview #jl-preview-cb {
    text-align: center;
}

#pickup-cta a {
    background: none;
    border: 0 none;
    color: #fff;
    cursor: pointer;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 1.667rem;
    font-weight: bold;
    line-height: 1.833rem;
    margin: 0 25px;
    white-space: nowrap;
    width: auto;
}

/*--------------------------------------------------------------------------
=Buttons
--------------------------------------------------------------------------*/
#jl-button {
    position: relative;
}

.jl-fontjax {
    margin: 0px auto;
    padding: 8px 10px 3px 10px;
    width: auto;
}

.jl-fontjax a,
.jl-fontjax button {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    margin: 0 25px 25px 25px;
    white-space: nowrap;
    width: auto;
}

/*= Tablets (Brightcove Specific)
-------------------------------------------------------------------------*/
@media only screen  and (min-width: 768px) and (max-width: 1024px) and (-webkit-min-pixel-ratio: 1) {
    /* Center caption vertically for tablets */
    #caption {
        margin: 15px 0;
        top: 1px;
    }

    .action-options {
        padding-bottom: 0;
    }

    /* Add top space to buttons */
    div.action-options button {
        margin-top: 20px;
    }
}

/*= Mobile
 --------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
    body#jl-viewcard #jl-tnxyou #jl-wrapper.mobile #jl-prod-content {
        margin: auto;
    }

    body#jl-viewcard #mhead {
        margin-bottom: 0;
    }

    body#jl-viewcard #jl-wrapper.mobile #jl-prod-content,
    #jl-tnxyou #jl-wrapper {
        width: auto;
    }

    body#jl-viewcard .jl-base #jl-wrapper {
        padding-bottom: 25px !important;
    }

    body#jl-viewcard #jl-tnxyou #jl-wrapper.mobile {
        margin: auto;
        width: auto;
    }

    body#jl-viewcard .mobile p {
        line-height: 1.333rem;
        margin: 0;
        padding: 25px 0;
    }

    #page #jl-wrapper p.fontjax-mobile {
        color: #CC4000;
        font-size: 1.667rem;
        font-family: 'jaxfont2', serif !important;
        margin: 0;
    }

    body#jl-viewcard .mobile p.intro {
        font-size: 1.083rem;
        font-weight: bold;
        padding: 18px 0 0 0;
    }

    body#jl-viewcard .mobile p#mobile_message {
        font-size: 1.083rem;
        font-weight: bold;
        line-height: 1.333rem;
        padding-bottom: 20px;
    }

    body#jl-viewcard .mobile #caption {
        font-size: 1.667rem;
        line-height: normal;
        margin-top: 0;
        margin: 0;
        padding: 14px 0;
        text-align: center;
    }

    body#jl-viewcard .mobile .action-options {
        font-family: 'jaxfont2', serif;
        font-size: 1.333rem;
        line-height: 1.5rem;
        margin-top: 10px;
    }

    body#jl-viewcard .mobile #reply_message {
        font-family: 'jaxfont2', serif;
        font-size: 1.667rem;
        line-height: 2.167rem;
        margin: 0 15px;
        padding: 0;
        text-align: left;
    }

    body#jl-viewcard .mobile a {
        margin: 0 5px;
    }

    #jl-tnxyou #jl-sendreply #reply-msg,
    #jl-tnxyou #jl-sendreply #reply-tofrom,
    #jl-tnxyou #jl-sendreply #reply-msg-inner,
    #jl-tnxyou #jl-sendreply #reply-msg-inner textarea,
    #jl-tnxyou #jl-sendreply #reply-msg-inner p.helptext{
        width: auto;
    }

    body#jl-viewcard .mobile a#sendreply {
        margin: 0 30px 0 5px;
    }

    body#jl-viewcard .mobile a#copyright {
        float: right;
    }

    body#jl-viewcard .mobile #jl-sendreply {
        padding-bottom: 20px;
        width: auto;
    }

    body#jl-preview #mhead {
        margin-bottom: 0;
    }

    #page .mbuttons-cta .mbutton {
        width: 295px !important;
    }

    #jl-preview,
    #jl-viewcard,
    #jl-viewcardm,
    #jl-premiere {
        line-height: normal;
        width: auto;
    }

    #copyright {
        display: block;
        float: none !important;
        font-family: 'jaxfont2', serif;
        font-weight: 300;
        opacity: .5;
        padding-top: 20px;
    }

    .gift-section {
        margin: 5% 0 0 0;
    }

    #page .mbuttons-cta {
        margin-top: 5%;
    }

    /*= Styling for games pages
    --------------------------------------------------------------------------*/
    body#jl-viewcard p.intro {
        font-size: 1rem;
        line-height: initial;
        width: inherit;
    }

    body#jl-viewcard .mobile #jl-tnxyou {
        line-height: initial;
        padding-top: 20px;
    }

    body#jl-viewcard .mobile #jl-tnxyou h1 {
        margin: 0 !important;
        padding: 25px 0;
    }

    body#jl-viewcard .mobile #jl-tnxyou fieldset {
        padding: 0 20px;
    }

    #jl-viewcard #jl-preview-cb {
        margin-top: 20px;
        text-align: center;
    }

    /*= Images for games pickup pages
    --------------------------------------------------------------------------*/
    body#jl-viewcard .mobile .replyimg {
        height: auto;
        max-width: 100%;
    }

    /*= Responsive sizing & styling for brightcove video player
    --------------------------------------------------------------------------*/
    body#jl-viewcard .mobile #jl-prod-content {
        width: 100%;
    }

    body#jl-viewcard .mobile #mobile-brightcove-experience,
    body#jl-preview .mobile #mobile-brightcove-experience {
        height: 0;
        position: relative;
        text-align: center;
        width: 100%;
    }

    .mobile #mobile-brightcove-experience object,
    .mobile #mobile-brightcove-experience iframe {
        height: auto;
        left: 0;
        margin-left: auto;
        margin-right: auto;
        min-height: 210px;
        top: 0;
        width: 100%;
    }

    body#jl-preview #jl-wrapper.mobile {
        height: auto;
        margin: 0;
        width: 100%;
    }

    body#jl-preview #jl-wrapper.mobile.bc-card-content,
    .bc-card-content {
        min-height: auto;
    }

    body#jl-preview #jl-wrapper.mobile.bc-nobuttons {
        min-height: inherit;
    }

    #jl-preview #jl-wrapper div.no_mobile_experience {
        width: 100%
    }

    #jl-preview div#jl-prev-close {
        height: 30px;
        font-size: 1rem;
        padding-top: 16px;
        box-sizing: border-box;
        text-align: right;
    }

    #jl-preview #preview-close {
        background: url(/jl/icons/close-x.png) no-repeat right 0 rgba(0, 0, 0, 0);
        border: 0 none;
        color: #2F3A3C;
        cursor: pointer;
        display: inline;
        height: 17px;
        padding: 0 19px 0 0;
        position: absolute;
        right: 10px;
        top: 8px;
        width: 55px;
    }

    .no_mobile_experience p#mobile_message {
        margin-top: 0px !important;
        padding-bottom: 20px !important;
    }

    #jl-wrapper p.fontjax-mobile, .fontjax-mobile {
        font-family: 'jaxfont2',serif !important;
    }

    #jl-preview #jl-preview-cb {
        padding-bottom: 15px;
        text-align: center;
    }

    .container {
        padding: 0;
        top: 0;
        width: 100%;
    }

    .intro {
        padding-left: 0;
        width: 100%;
    }

    #jl-ecardsurvey #jl-wrapper {
        margin: 0 15px;
        width: inherit;
    }

    #jl-ecardsurvey .surveycontainer {
        padding: 0;
    }

    .brightcove-captions {
        font-size: 2.2rem;
    }

    #caption {
        line-height: 4.167rem;
        top: 5px;
    }

    .no_mobile_experience #preview_message {
        display: inline-block;
        margin-top: 0;
        padding-bottom: 20px;
        max-width: 90%;
    }

    body#jl-preview .mobile .action-options {
        margin-top: 2px;
        padding-bottom: 0;
        width: 100%;
    }

    /*--------------------------------------------------------------------------
    = Premiere
    --------------------------------------------------------------------------*/
    body#premiere #jl-wrapper {
        margin: 0;
    }

    body#premiere #brightcove #caption {
        font-size: 1.5rem;
    }

    /*--------------------------------------------------------------------------
    = Pickup
    --------------------------------------------------------------------------*/
    #jl-preview #pickup-cta .mbutton,
    #notecard-pickup .mbuttons-cta .mbutton {
        text-transform: none !important;
    }

    #jl-notecardpreview-mobile #footer,
    #jl-christmasletterpreview-mobile #footer {
        margin-top: 200px;
    }

    #jl-preview .download-app {
        padding: 40px 25px 0;
    }

    #jl-preview .download-app h3 {
        color: #010060;
    }

    #jl-preview .download-app p {
        margin: initial;
        padding: inherit;
    }
}

#jl-preview .download-app h3 {
    font-size: 1.583rem !important;
    font-weight: bold;
    margin: 0 0 .67em 0;
}

#jl-preview .downloadapp-copy a {
    font-weight: bold;
}

@media only screen
and (min--width : 300px)
and (max-width : 900px)
and (orientation : landscape) {
    #preview-cardcontent.pickup-cardcontent {
        height: 85vh !important;
    }

    .mobile .product-html-div {
        height: calc(100vh - 58px) !important;
    }

    #page .mbuttons-cta {
        margin-top: 10px !important;
    }

    #jl-preview .mbuttons-cta a.mbutton {
        padding: 6px auto !important;
    }

    #jl-preview .download-app {
        padding: 20px 25px 0;
    }
}

/* ipad styling */

@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
    #jl-preview .download-app {
        margin: 0 auto;
        padding: 10px 10%;
    }
}

@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
    body#jl-preview #preview-cardcontent {
        height: auto !important;
    }

    body#jl-preview #product {
        height: auto !important;
    }

    #jl-preview .download-app {
        margin: 0 auto;
        padding: 30px 10%;
    }
}

@media only screen
and (max-width: 1024px)
and (orientation: portrait) {
    body#jl-preview #product {
        height: auto !important;
    }

    #preview-cardcontent.pickup-cardcontent {
        height: auto !important;
    }
}

@media only screen
and (min-width : 1024px)
and (max-width : 1366px)
and (orientation : landscape) {
    #jl-preview .download-app {
        margin: 0 auto;
        padding: 30px 10%;
    }
}