/*Jacquie Lawson Page Builder Styling*/

#header #hdr-container {
    display: block;
    margin: auto;
    width: 995px;
}

.jl-base #jl-wrapper {
    margin: 10px auto 20px;
    padding: 0;
    width: 980px;
}

img {
    border: 0;
}

#jl-wrapper ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#jl-footer {
    margin: 40px 0 0 0;
    padding: 0;
    text-align: center;
    width: 100%;
}

.main-headline {
    font-size: 2rem;
    margin: 10px 0;
}

.main-headline.centered {
    margin: 10px auto;
    text-align: center;
}

.main-headline a {
    color: #C40;
}

.main-multimedia-horizontal {
    overflow: hidden;
    position: relative;
}

.main-multimedia-horizontal .video,
.main-multimedia-horizontal .image_link,
.main-multimedia-horizontal .unlinked_image {
    float: left;
    margin-right: 35px;
}

.main-multimedia-horizontal .copy {
    float: left;
    width: 485px;
}

.main-multimedia-horizontal .copy h2 {
    color: #3B95AD;
    font: 900 1.667rem Verdana;
    margin: 10px 0;
}

.main-multimedia-horizontal .copy p {
    font-size: 1.083rem;
    margin: 10px 0;
}

.main-multimedia-horizontal .copy .gradient-button,
.main-multimedia-vertical .gradient-button {
    background: #F19661;
    background: -moz-linear-gradient(center top , #FAD4BF, #f48b4e)
        repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -ms-linear-gradient(top, #FAD4BF, #f48b4e);
    background: -o-linear-gradient(top, #FAD4BF, #f48b4e);
    background: -webkit-linear-gradient(top, #FAD4BF, #f48b4e);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD4BF), to(#f48b4e));
    border: 1px solid #4B5054;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    color: #000000;
    display: inline-block;
    font-size: 1.167rem;
    font-weight: bold;
    margin: 12px 0;
    padding: 7px 34px;
}

.main-multimedia-horizontal .flash-video,
.main-multimedia-vertical .flash-video {
    overflow: hidden;
    z-index: 10;
}

.main-multimedia-vertical {
    text-align: center;
}

.main-multimedia-vertical .copy {
    margin: 10px 0px;
}

.main-multimedia-vertical .copy h2 {
    font-size: 1.333rem;
    font-stretch: semi-condensed;
    font-weight: 600;
    margin: 10px 0;
}

.main-multimedia-vertical .copy p {
    font-size: 1.083rem;
    margin: 10px 0;
    text-align: left;
}

.main-multimedia-vertical .video,
.main-multimedia-vertical .image_link,
.main-multimedia-vertical .unlinked_image {
    display: block;
    margin: 10px 0;
}

.main-multimedia-vertical .flash-video {
    margin: 0 auto 10px auto;
    position: relative;
}

.main-container-shelf {
    background: #B3D0D8;
    border: 2px solid #77A5B5;
    margin: 40px auto 12px;
    text-align: center;
    width: 923px;
}

.container-shelf-headline {
    color: #3c788b;
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 5px;
    text-align: center;
}

#jl-index .main-container-shelf {
    background-color: #c3dae0;
    border: 2px solid #77a5b5;
    margin: 32px 0 25px;
    width: auto;
}

#jl-index .main-container-shelf-content h3 {
    margin: 8px 0 14px;
}

.main-container-shelf-content {
    display: inline-block;
    margin: 10px 0;
    text-align: center;
}

.main-container-shelf-content h3 {
    font-size: 1.583rem;
    margin: 0 0 6px 0;
}

.main-container-shelf-content h3 .headline-link {
    color: #3c788b;
}

.main-container-shelf-content h3 .headline-link:hover {
    color: #CC4000;
}

.main-container-shelf-content .record_list {
    text-align: center;
}

.main-container-shelf-content .record {
    display: inline-block;
    margin: 0 7px;
    text-align: center;
}

.main-container-shelf-content .record .thumb-link,
.main-container-shelf-content .record .thumb-link .thumbimg {
    display: block;
}

.main-container-shelf-content .record .title-link {
    color: #006;
    display: block;
    margin-top: 5px;
    text-decoration: underline;
}

.main-container-shelf-content .record .is-new {
    background: url(/jl/new.gif) no-repeat right top;
    height: 17px;
    overflow: hidden;
    padding-right: 30px;
}

.main-container-shelf-content .button-caption-link {
    background: #ddd;
    background: -moz-linear-gradient(center top , #ddd, #ababab)
        repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -ms-linear-gradient(top, #ddd, #ababab);
    background: -o-linear-gradient(top, #ddd, #ababab);
    background: -webkit-linear-gradient(top, #ddd, #ababab);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#ababab));
    border: 1px solid #757F80;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    display: inline-block;
    font-size: 1rem;
    font-weight: normal;
    margin: 10px 0;
    padding: 5px 13px;
}

.full-width-container-links {
    list-style-type: none;
    margin: 10px 0;
    padding: 0;
}

.full-width-container-links li {
    border-left: 2px solid #DF8C5E;
    display: inline;
    font-weight: 900;
    margin-bottom: 4px;
    margin-right: 8px;
    padding-left: 8px;
}

.full-width-container-links li.first-link {
    border-left: 0;
    padding-left: 0;
}

/*---------------------------------------------------------------
= Card content (thumb, title, description, action links)
---------------------------------------------------------------*/
#page-cards .main-headline {
    font-size: 1.583rem;
}

.featured-card {
    background-color: #bed6de;
    padding: 0 15px 15px;
}

.featured-card h3 {
    color: #CC4000;
    font-size: 1.167rem;
    padding-top: 2px;
    text-align: center;
    text-transform: uppercase;
}

.card-content {
    clear: both;
    margin-bottom: 30px;
    overflow: hidden;
}

.featured-card .card-content {
    margin: 0;
}

.card-content .content-thumb,
.card-content .content-data,
.card-content .calltoaction {
    float: left;
}

.card-content .content-thumb {
    width: 17%;
}

.card-content .content-data {
    margin: 0 3%;
    width: 62%;
}

.card-content .content-data h2 {
    color: #006;
    font-size: 1.083rem;
    margin: 0;
}

.card-content .content-data p {
    color: #006;
    font-size: 0.9167rem;
    margin: 0 0 15px;
}

.card-content .content-data p.card-captions {
    margin: 0;
}

.card-content .calltoaction {
    float: right;
    width: 14%;
}

.card-content .calltoaction a,
.card-content .calltoaction button {
    display: block;
    font-weight: bold;
}

.jl-base #thecardslist a {
    background-repeat:no-repeat !important;
    padding: 8px 0 6px 29px !important;
    display:block;
}

#page-cards #jl_lightbox {
    background: #cc4000;
    top: 25% !important;
}

/*---------------------------------------------------------------
= Category Card content (thumb, title, description, action links)
---------------------------------------------------------------*/
#page-category .main-headline {
    font-size: 1.583rem;
}

.content-list {
    padding-top: 15px !important;
}

ul.content-list.hidden {
    display:none;
}

@media screen and (max-width: 1000px) {
    .jl-base #jl-wrapper {
        margin: 10px 1.5%;
        width: 97%;
    }
}

/*---------------------------------------------------------------
= Category Promo Banner
---------------------------------------------------------------*/

.banner_promo {
    text-align: center;
}

/*---------------------------------------------------------------
= Note Cards content (grid layout)
---------------------------------------------------------------*/

#page-notecards .main-headline {
    font-size: 1.667rem;
}

#page-notecards .content-list {
    padding-top: 20px;
}

#page-notecards .card-content.grid {
    clear: none;
    float: left;
    margin-right: 2%;
    position: relative;
    width: 48%;
}

#page-notecards .card-content.grid .content-thumb {
    width: 250px;
}

#page-notecards .card-content.grid .content-data {
    margin: 10px 0;
    width: 100%;
}

#page-notecards .card-content .content-data p {
    color: #000000;
    font-size: 1rem;
    margin: 6px 0 15px;
}

#page-notecards .card-content.grid .calltoaction {
    float: none;
    left: 270px;
    position: absolute;
    top: 62px;
    width: 125px;
}

#page-notecards .card-content .calltoaction a,
#page-notecards .card-content .calltoaction button {
    margin-bottom: 10px;
}

@media screen and (max-width: 930px) {
    .card-content .content-thumb {
        width: 165px;
    }

    .card-content .content-data {
        width: 53%;
    }

    .card-content .calltoaction {
        width: 130px;
    }
}

@media screen and (max-width: 768px) {
    .card-content .calltoaction {
        float: none;
    }

    .jl-base #thecardslist,
    #thecards_nm #thecardslist {
        width: auto;
    }

    .jl-base #thecardslist ul,
    #thecards_nm #thecardslist ul {
        float: none;
        margin: 0 0 20px 0;
        width: auto;
}

    /*Home page*/
    #jl-index #page .main-container-shelf {
        background: none;
        border: 0px;
        margin: 0;
    }

    #page .main-container-shelf-content {
        display: block;
        margin: 20px 0 10px 0;
    }

    #jl-index .main-container-shelf-content h3 {
        margin: 0 0 24px 0 !important;
    }

    #page .main-container-shelf-content h3 a.headline-link {
        color: #cc4000 !important;
        font-size: 1.667rem;
    }

    #page #hp-copy {
        float: none;
        width: 100%
    }

    #page #hp-copy h2 {
        font-size: 20px !important;
    }

    #page #hp-copy h1 a {
        color: #000066;
        font-size: 1.333rem;
    }

    #page .banner_promo img {
        -moz-box-shadow: 2px 2px 2px #666;;
        -webkit-box-shadow: 2px 2px 2px #666;;
        box-shadow: 2px 2px 2px #666;
        width: 100%;
    }
}

@media screen and (max-width: 420px) {
    .card-content .content-thumb {
        float: none;
    }

    .card-content .content-data {
        float: none;
        margin: 0 0 10px 0;
        width: 100%;
    }

    .card-content .content-data p.card-desc {
        margin: 0 0 10px;
    }
}

/* =Mobile
-----------------------------------------------------------------------------------------------------------*/
@media only screen and (max-device-width: 767px) {
    #page-category .main-headline,
    #page-notecards .main-headline {
        font-size: 1.5rem;
        margin: 0 0 18px 0 !important;
    }

    /* Thumbs */
    #page #jl-wrapper ul.content-list,
    #page .main-container-shelf-content .record_list {
        display: block;
        list-style-type: none;
        margin: 0;
        overflow: hidden;
        padding: 0 !important;
        text-indent: 0;
        width: 100%;
    }

    #page ul.content-list li,
    #page .main-container-shelf-content .record {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        box-sizing: border-box;
        clear: none;
        float: left;
        margin: 0 0 2.1em 4.5% !important;
        overflow: visible;
        padding: 0;
        position: relative;
        text-align: center;
        width: 45% !important;
    }

    #page ul.content-list li:nth-child(2n+1),
    #page .main-container-shelf-content .record:nth-child(2n+1) {
        clear: left;
        margin: 0 4.5% 2.1em 0 !important;
    }

    #page ul.content-list li a.content-thumb,
    #page .main-container-shelf-content .record .thumb-link {
        display: block;
        float: none;
        margin: 0 auto 7px auto;
        width: auto;
    }

    #page ul.content-list li a img,
    #page .main-container-shelf-content .record img {
        box-shadow: 2px 2px 2px #666;
        display: block;
        margin: 0 auto;
        max-width: 250px;
        padding: 0;
        width: 100%;
    }

    .thumbcap,
    #page .main-container-shelf-content .record .title-link {
        font-family: Verdana,Arial,Helvetica,sans-serif;
        font-size: 1.083rem;
    }

    #page .main-container-shelf-content .record .title-link {
        text-decoration: none;
    }

    .tab-new {
        color: #375a66;
        font-size: 1rem;
        font-weight: bold;
        margin: 2px 0 0 0;
    }

    /* Back to top */
    .backtotop {
        display: block;
        margin: 30px 0 0 0;
        text-align: center;
    }

    .backtotop:after {
        content: "^";
        font-size: 1.25rem;
        margin-left: 6px;
        vertical-align: sub;
    }
}