.mainWrap {
    padding: 20px 0;
}

.mainWrap a,
.mainWrap button {
    -moz-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.pageTitle {
    background: url('/wp-content/themes/alislam/images/jesus/bnnr_jesus-large.png') no-repeat;
    width: 100%;
    height: 80px;
    margin-bottom: 1rem;
} 

.headerTitle {
    padding: 10px 0 0 .5em;
    margin-bottom: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 2rem;
    color: #e2e8ee;
}

.headerSub {
    font-size: 1rem;
    font-style: italic;
    font-weight: normal;
    margin-left: 1em;
    color: #e2e8ee;
}
/*--- Sidebar ---*/

.sidebarWrap .card-body {
    padding: 0;
}

.sidebarWrap .card-body ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: table;
    width: 100%;
}

.sidebarWrap .card-body ul li {
    float: left;
    width: 100%;
}

.sidebarWrap .card-body ul li:nth-child(2n) {
    background-color: rgba(0, 0, 0, .02);
    border-top: 1px solid #eee;
}

.sidebarWrap .card-body ul li a {
    padding: 10px 15px;
    color: #666;
    display: inline-block;
    font-family: 'Roboto', sans-serif; font-size: 13px;
    color: #666;
}


/*--- content area ---*/

#intro p {
    font-family: 'Roboto', sans-serif; font-size: 1rem;
    color: #666;
}

sup {
    line-height: 0;
    font-size: 75%;
    margin: 0 0 0 -.2em;
    vertical-align: baseline;
}

.cap {
    font-family: 'Roboto', sans-serif; font-size: 1.2rem;
    float: left;
    width: 1.6em;
    color: #FFFFFF;
    text-align: center;
    border: 2px solid #598059;
    margin: .2em .2em 0 0;
    background: #0f400f;
}

.topic {
    margin-bottom: 20px;
    border-width: 10px;
    border-style: solid;
    width: 100%;
}

.topic .intro {
    font-family: 'Roboto', sans-serif; font-size: 1rem;
    padding-bottom: 10px;
    margin: 10px 10px 0 10px;
}

.topic ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.topic li {
    font-family: 'Roboto', sans-serif; font-size: .9rem;
    margin: 0 0 0 0;
    padding: 10px 10px 15px 60px;
    width: 50%;
    /*float: left;*/
    /*display: inline;*/
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
@media (min-width: 991px) {
    .topic li {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.topic li strong {
    color: #fff;
    font-weight: 600;
}

.topic li a {
    color: #ffdb56;
    text-decoration: none;
}

#container-main-content span {
    color: #ffdb56;
}

/* =Life Before
----------------------------------------------- */

#life-before h2 {
    color: #bed4be;
    padding: 10px;
    overflow: hidden;
    border-bottom: 10px solid #627662;
    position: static;
    font-size: 1.5rem;
    font-weight: 700;
}

#life-before .intro {
    border-bottom: 1px solid #627662;
}

#life-before {
    color: #bed4be;
    background: #3b543b;
    border-color: #627662;
    margin-bottom: 20px;
}

#life-before li.selected {
    background-color: #627662;
    position: relative;
}

li#virgin-birth {
    background: url('/wp-content/themes/alislam/images/jesus/thumb-birth.gif') no-repeat 10px;
}

li#son-of-god {
    background: url('/wp-content/themes/alislam/images/jesus/thumb-heavens.gif') no-repeat 10px;
}

li#miracles {
    background: url('/wp-content/themes/alislam/images/jesus/thumb-fish.gif') no-repeat 10px;
}

li#mission {
    background: url('/wp-content/themes/alislam/images/jesus/thumb-sheep.gif') no-repeat 10px;
}


/* =Survival
----------------------------------------------- */

#survival {
    background: #4d2121;
    border-color: #714d4d;
    margin-bottom: 20px;
}

#survival h2 {
    padding: 10px;
    overflow: hidden;
    border-bottom: 10px solid #714d4d;
    position: relative;
    font-size: 1.5rem;
    font-weight: 700;
}

#survival .intro {
    border-bottom: 1px solid #714d4d;
}

#survival {
    color: #d3c3bd;
}

#survival li.selected {
    background-color: #714d4d;
    position: relative;
}

li#jonah {
    background: url('/wp-content/themes/alislam/images/jesus/thumb-whale.gif') no-repeat 10px;
}

li#blood-and-water {
    background: url('/wp-content/themes/alislam/images/jesus/thumb-spear.gif') no-repeat 10px;
}

li#gethsemane {
    background: url('/wp-content/themes/alislam/images/jesus/thumb-prayer.gif') no-repeat 10px;
}

li#duration {
    background: url('/wp-content/themes/alislam/images/jesus/thumb-hourglass.gif') no-repeat 10px;
}

li#pilate {
    background: url('/wp-content/themes/alislam/images/jesus/thumb-pilate.gif') no-repeat 10px;
}

li#herbs {
    background: url('/wp-content/themes/alislam/images/jesus/thumb-aloe.gif') no-repeat 10px;
}

li#legs {
    background: url('/wp-content/themes/alislam/images/jesus/thumb-legs.gif') no-repeat 10px;
}

li#denial {
    background: url('/wp-content/themes/alislam/images/jesus/thumb-honeycomb.gif') no-repeat 10px;
}


/* =Life After
----------------------------------------------- */

#life-after {
    background: #213a54;
    border-color: #4d6176;
    margin-bottom: 20px;
}
#life-after h2 {
    padding: 10px;
    overflow: hidden;
    border-bottom: 10px solid #4d6176;
    position: relative;
    font-size: 1.5rem;
    font-weight: 700;
}

#life-after .intro {
    border-bottom: 1px solid #4d6176;
}

#life-after {
    color: #bec9d4;
}

#life-after li.selected {
    background-color: #4d6176;
    position: relative;
}

li#lost-tribes {
    background: url('/wp-content/themes/alislam/images/jesus/thumb-map.gif') no-repeat 10px;
}

li#tomb {
    background: url('/wp-content/themes/alislam/images/jesus/thumb-tomb.gif') no-repeat 10px;
}

li#buddhism {
    background: url('/wp-content/themes/alislam/images/jesus/thumb-buddha.gif') no-repeat 10px;
}

li#victory {
    background: url('/wp-content/themes/alislam/images/jesus/thumb-kashmir.gif') no-repeat 10px;
}


/* @group Popouts */


/* This container is necessary to apply the drop shadow effect */

.popout-container {
    position: absolute;
    top: 6px;
    left: 100%;
    width: 400px;
    z-index: 1;
    /* safari needs this */
}

.popout-container-right-wide {
    position: absolute;
    top: 6px;
    left: 100%;
    width: 500px;
    z-index: 1;
    /* safari needs this */
}

.popout-container-bottom {
    position: absolute;
    top: 100%;
    left: 6px;
    width: 500px;
    z-index: 1;
    /* safari needs this */
}

.popout-container-bottom-wide {
    position: absolute;
    top: 100%;
    left: 6px;
    width: 700px;
    z-index: 1;
    /* safari needs this */
}

.popout-container-top {
    position: absolute;
    bottom: 58px;
    left: 6px;
    width: 500px;
    z-index: 1;
    /* safari needs this */
}



/* This child selector is not recognized by ie6 and lower. Therefore, it doesn't display the transparent png which it can't handle  */

li>div.popout-container,
li>div.popout-container-right-wide,
li>div.popout-container-bottom,
li>.popout-container-bottom-wide {
    background: url('/wp-content/themes/alislam/images/jesus/bg-shadow.png') right bottom;
}

.popout-content {
    background-color: #ffffe5;
    padding: 20px;
    color: #333;
    position: relative;
    top: -6px;
    left: -6px;
    font: 1.1em/1.3em Georgia, "Times New Roman", Times, serif;
}

#life-before .popout-content {
    border: 10px solid #627662;
}

#survival .popout-content {
    border: 10px solid #714d4d;
}

#life-after .popout-content {
    border: 10px solid #4d6176;
}

.popout-content h4 {
    margin: 1.7em 0 0 0;
    color: black;
    font-family: 'Roboto', sans-serif; font-size: 1em;
}

.popout-content h4.first {
    margin: 0 0 0 0;
}

#life-before .popout-content h4 {
    color: #3b543b;
}

#survival .popout-content h4 {
    color: #714d4d;
}

#life-after .popout-content h4 {
    color: #4d6176;
}

.popout-content p {
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
}

.popout-content p a {
    color: #0000cc;
    font-weight: bold;
}

.popout-content p a:hover {
    color: #0000ff;
}

.popout-content blockquote {
    margin-top: 1em;
    margin-bottom: 1.2em;
    margin-left: 3em;
    margin-right: 3em;
    font-family: 'Roboto', sans-serif; 
    line-height: 1.1em;
}

.popout-content .footnotes {
    border-top: 1px dotted #666;
    text-indent: -.6em;
    font-family: 'Roboto', sans-serif; font-size: 14px;
}

.popout-content a.close-button {
    color: #ffffe5;
    position: relative;
    float: right;
    top: -20px;
    right: -20px;
    width: 1.2em;
    height: 1.5em;
    text-align: right;
    font-family: 'Roboto', sans-serif; font-size: 1.2em;
    text-decoration: none;
}

#life-before .popout-content a.close-button {
    background-color: #627662;
}

#survival .popout-content a.close-button {
    background-color: #714d4d;
}

#life-after .popout-content a.close-button {
    background-color: #4d6176;
}

.popout-content a.close-button:hover {
    text-decoration: none;
}


/* @end */


@media (max-width: 991px) {
    .popout-container, .popout-container-right-wide, .popout-container-bottom, .popout-container-bottom-wide, .popout-container-top  {
        position: relative;
        top: 0;
        bottom: auto;
        right: auto;
        left: 0;
        width: 100%;
        margin-top: 10px;
    }
    .popout-content {
        top: 0;
        left: 0;
    }
    .topic li:first-child {
        margin-top: 10px;
    }
    .topic li {
        margin-bottom: 10px;
    }
    .topic li.selected {
        background-position: 10px 10px !important;
    }
}