/* About This Article */
.wikihow-article #social_proof_mobile {
    background-color: #fff;
    font-size: .9em;
}
.wikihow-article #social_proof_mobile, #social_proof_mobile p {
    font-size: inherit;
    line-height: inherit;
}
.wikihow-article #aboutthisarticle > .section_text, #aboutthisarticle .sp_top_box, #aboutthisarticle #sp_expert_desc, #aboutthisarticle .sp_box {
    padding: 15px 26px;
}
.wikihow-article #aboutthisarticle .sp_stats_box {
    border-left: 1px solid #f3f3f3;
}
.wikihow-article #aboutthisarticle .sp_box {
    float: left;
    width: 50%;
    margin: 0;
    padding: 15px 10px 15px 15px;
    position: relative;
    box-sizing: border-box;
}
.wikihow-article #sp_expert_desc {
    padding: 10px 8px;
    border-bottom: 1px solid #f3f3f3;
}
.wikihow-article #social_proof_mobile .sp_fullbox {
    width: 100%;
    border-top: 1px solid #f3f3f3;
    border-left: none;
    font-size: 16px;
}

/* footer of article page */
.wikihow-article #footer {
    padding: 0;
    margin: 0;
    bottom: 0;
    width: 100%;
    font-size: .9em;
    background-color: #93B874;
    color: #FFF;
}
.wikihow-article #footer a {
    color: #FFF;
}
.wikihow-article .footer_divider {
    border-top: 1px solid #77a555;
    padding-bottom: 1em;
    margin-top: 1em;
}
.wikihow-article #footer_inner {
    padding: 30px 1em;
    margin: 0 auto;
}
.wikihow-article #footer_links li {
    white-space: nowrap;
    line-height: 2em;
}

/* Changing footer appearance so that the separator line takes all width
   and footer links are aligned right on larger screen */
@media only screen and (min-width:728px) {

    .footer_divider,
    #footer_logo,
    #footer_crumbs {
        grid-column: 1 / span 3
        /*grid-column: 1 / span 3*/
    }

    #footer_links {
        /*grid-column: 1;
        grid-row: 5;*/
    }

}


@media only screen and (min-width:975px) {

    .footer_divider,
    #footer_logo,
    #footer_crumbs {
        grid-column: span 3;
        /*grid-column: span 2*/
    }

    #footer_links {
        grid-column: 3 / span 1;
        grid-row: span 2;
        /*grid-column: 2 / span 1;
        grid-row: span 2;*/
    }

    #footer_links ul {
        -webkit-columns: 3;
        -moz-columns: 3;
        columns: 3;
        /*-webkit-columns: 2;
        -moz-columns: 2;
        columns: 2;*/
    }
}

/* outbound array icon for all external links */
html[dir=ltr] a.external-link {
    background-image: url(external-link-ltr-icon.svg) !important;
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 13px;
}
html[dir=rtl] a.external-link {
    background-image: url(external-link-rtl-icon.svg) !important;
    background-position: center left;
    background-repeat: no-repeat;
    padding-left: 13px;
}


/* hide plus (+) icon on sub categories list as this feature requires JS.
   its content is available inside the category linked next to the icon */
#subcats .subcat_container .show_more {
    display: none !important;
}


/* kiwix-serve hack to work around kiwix-serve's task-bar */
.kiwix + #header_container {
    top: 37px;
}

.kiwix #kiwixtoolbar button {
    color:  black;
}


/* video support */

/* video section block is hidden by default and displayed later by JS */
.section.video {
    display: block;
}

/* related articles on bottom or Article are not visible.
    CSS also changed by JS
    TODO:  ensure responsiveness */
#relatedwikihows .content-fill {
    position: relative;
}
#relatedwikihows .content-spacer {
    height: 189px;
}
.related-wh-title {
    left:  0;
}

/* sidebar */

/* Fixed sidebar relateds */
#side_related_articles .related-wh .content-spacer {
    height: 150.257px;
}

/* hiding all elements of sidebar except those we want to keep
   because we know they look OK */
#sidebar > * {
    display: none;
}
#sidebar #social_proof_sidebox {
    display: block;
}
#sidebar #side_related_articles{
    display: block;
}