/*
 * CSS Styles for callouts
 */

/* Open callout - outer frame */
.sf_calloutstyle_open {
    margin: 2em 4em 1em 3em;
    padding: 0;
}

@media only screen and (max-width: 1000px) {
    .sf_calloutstyle_open {
        margin: 2em 1em 1em 1em;
    }

    .sf_calloutstyle_open .sf_callout_content {
        padding: 1em 1em 1em 3em !important;
    }
}

.sf_calloutstyle_open .sf_callout_content {
    padding: 1em 2em 1em 2.5em;
    position: relative;
}

.sf_calloutstyle_open ul {
    padding-left: 1em;
}

.sf_callout_content li {
    margin-bottom: 0.5em !important;
}

/* Open callout - add [ and ] elements before and after the wrap. */
.sf_calloutstyle_open .sf_callout_wrap:before, .sf_calloutstyle_open .sf_callout_wrap:after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 100%;
    top: 0;
    border: 1px solid #8CAFD3;
    box-sizing: border-box;
}

.sf_calloutstyle_open .sf_callout_wrap:before {
    border-right: none;
    left: 0;
}

.sf_calloutstyle_open .sf_callout_wrap:after {
    border-left: none;
    right: 0;
}

.sf_calloutstyle_open .sf_callout_wrap {
    position: relative;
}

/* Background image - open callouts */
.sf_calloutstyle_open .sf_callout_bg {
    background-position: 50% 50%;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-color: #fff;
    position: absolute;
    height: 44px;  /* a bit bigger than image size */
    width: 44px; /* same as height */
    left: -22px; /* 1/2 of width */
    top: 8px;
} 

.sf_callouttype_note .sf_callout_bg {
    background-image: url('images/note.png');
}

.sf_callouttype_bullseye .sf_callout_bg {
    background-image: url('images/bullseye.png');
}

.sf_callouttype_tip .sf_callout_bg {
    background-image: url('images/tip.png');
}

.sf_callouttype_important .sf_callout_bg {
    background-image: url('images/important.png');
}

.sf_callouttype_example .sf_callout_bg {
    background-image: url('images/example.png');
}

.sf_callouttype_takeaways .sf_callout_bg {
    background-image: url('images/takeaways.png');
}

.sf_callouttype_definition .sf_callout_bg {
    background-image: none;
}

.sf_callouttype_digdeeper .sf_callout_bg {
    background-image: url('images/digdeeper.png');
}

.sf_callouttype_actionsteps .sf_callout_bg {
    background-image: url('images/actionables.png');
}

.sf_callouttype_brainscience .sf_callout_bg {
    background-image: url('images/brainscience.png');
}

.sf_callouttype_savingstip .sf_callout_bg {
    background-image: url('images/savingstip.png');
}

.sf_callouttype_spendingtip .sf_callout_bg {
    background-image: url('images/spendingtip.png');
}

.sf_calloutstyle_box {
    border: 1px solid #ccc;
    margin: 2em 0 1em 0;
    min-height: 60px;
    padding: 0 1em;
    position: relative;
    box-shadow: 2px 2px #eee;
}

/* Background image - box callouts */
.sf_calloutstyle_box .sf_callout_bg {
    background-position: 50% 50%;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-color: #fff;
    position: absolute;
    height: 44px;  /* a bit bigger than image size */
    width: 44px; /* same as height */
    left: 1em; /* 1/2 of width */
}   

.sf_calloutstyle_box h3 {
    margin: 0 0 0.5em 2.5em;
    padding: 0.3em 0 0 0;
}

.sf_callouttype_definition h3 {
    margin: 0 !important;
    padding: 0 !important;
}

.sf_callouttype_definition .sf_callout_bg {
    display: none !important; 
}