/* The app uses the MERs CSS while the website uses SEEP - therefore both are needed ! */

#WDContentPlaceHolder {
    font-family: "Open Sans", Verdana, Roboto, Arial, sans-serif;
    font-weight: 400;
}

    #WDContentPlaceHolder a:link, #WDContentPlaceHolder a:visited, #WDContentPlaceHolder a:active {
        color: #389d5b;
        text-decoration: none;
        font-weight: bold;
    }

    #WDContentPlaceHolder a:hover {
        color: #389d5b;
        text-decoration: none;
        font-weight: bold;
    }

    #WDContentPlaceHolder p {
        color: #000000;
        font-size: 1em;
    }


    #WDContentPlaceHolder table {
        position: relative;
    }

    #WDContentPlaceHolder td {
        position: relative;
        padding: 0.2em;
    }

    #WDContentPlaceHolder tr {
        position: relative;
    }

    #WDContentPlaceHolder t5 {
        position: relative;
    }

    #WDContentPlaceHolder th {
        background-color: #bbbbbb;
        padding-top: 0.4em;
        padding-bottom: 0.4em;
    }


    #WDContentPlaceHolder tr:nth-child(even) {
        background-color: #ffffff;
    }

    #WDContentPlaceHolder tr:nth-child(odd) {
        background-color: #dddddd;
    }

    #WDContentPlaceHolder img {
        vertical-align: middle;
    }

    #WDContentPlaceHolder h1 {
        color: #008c41;
        font-size: 2em;
        font-weight: 300;
    }

    #WDContentPlaceHolder h2 {
        color: #008c41;
        font-size: 2em;
        font-weight: 300;
    }

    #WDContentPlaceHolder h3 {
        color: #008c41;
        font-size: 2em;
        font-weight: 300;
    }

    #WDContentPlaceHolder h4 {
        color: #008c41;
        font-size: 1.6em;
        font-weight: 600;
    }

    #WDContentPlaceHolder h5 {
        color: #008c41;
        font-size: 1.4em;
        font-weight: 600;
    }

    #WDContentPlaceHolder h6 {
        color: #008c41;
        font-size: 1.4em;
        font-weight: 600;
        font-style: italic;
    }

    #WDContentPlaceHolder h7 {
        color: #008c41;
        font-size: 1.4em;
        font-weight: 600;
    }



    #WDContentPlaceHolder .contents {
        color: #008c41;
    }

    #WDContentPlaceHolder .figure {
        color: #008c41;
        font-size: 1.5em;
    }




    /* Bulleted lists - using a custom small bullet starting close to the left margin */
    #WDContentPlaceHolder ul.List2 {
        padding-left: 1.2em;
        list-style: square;
    }

    #WDContentPlaceHolder .List2 li {
        /* list-style: square; While this appears as duplication, it is necessary to override where List2 is a sublist of List1 */
        color: #000000;
        padding-left: 1em;
        padding-bottom: 0.2em;
    }

    /* The labels for the square bullets - we hide them and use the method above as the custome bullets dont scale on mobile devices */
    #WDContentPlaceHolder .ListLabel1 {
        display: none;
    }

    /* Dashed sub-bullets */
    /* Sub lists - using a custom - in the Essential Shelter section */
    #WDContentPlaceHolder ul.List1 {
        padding-left: 1em;
        list-style: none;
    }
    /* March 2020 - swap for rtl */
    #WDContentPlaceHolder[dir="rtl"] ul.List1 {
        padding-left: 0em;
        padding-right: 1em;
    }

    /* Add some padding */
    #WDContentPlaceHolder .List1 li {
        position: relative;
        list-style: none;
        padding-left: 2em;
    }
    /* March 2020 - swap for rtl */
    #WDContentPlaceHolder[dir="rtl"] .List1 li {
        padding-left: 0em;
        padding-right: 2em;
    }

    #WDContentPlaceHolder .ListLabel5 {
        position: absolute;
        left: 0.0em;
    }
    /* March 2020 - swap for rtl */
    #WDContentPlaceHolder[dir="rtl"] .ListLabel5 {
        left: inherit;
        right: 0.0em;
    }


    /* 1, 2, 3 */
    #WDContentPlaceHolder .ListNum1 {
        list-style-type: decimal;
        padding-left: 1.5em;
    }

    #WDContentPlaceHolder ol.ListNum1 li {
        margin-left: 0.0em;
        padding-left: 1.0em;
    }



    /* All content of ul and ol should be the same colour */
    #WDContentPlaceHolder ul span,
    #WDContentPlaceHolder ol span {
        color: #000000;
    }


    /* Standards */
    #WDContentPlaceHolder .cbox,
    #WDContentPlaceHolder .PrinCommStan {
        position: relative;
        padding: 0.3em 1em 0.8em 4.5em;
        margin-top: 1em;
        margin-bottom: 1em;
    }
    /* March 2020 - Images need to be right to left too */
    #WDContentPlaceHolder[dir="rtl"] .cbox,
    #WDContentPlaceHolder[dir="rtl"] .PrinCommStan {
        padding: 0.3em 4.5em 0.8em 1em;
    }

        #WDContentPlaceHolder .cbox b,
        #WDContentPlaceHolder .PrinCommStan b {
            color: #008c41;
        }

        /* Principles, commitments, standards titles */
        #WDContentPlaceHolder .cbox .ChapTitle {
            color: #008c41;
            font-size: 1.8em;
            margin: 0;
            margin-top: 0em;
            margin-bottom: 0em;
            padding-top: 0.8em;
            padding-bottom: 0.8em;
        }

        /* Principles, commitments, standards titles */
        #WDContentPlaceHolder .cbox .para {
            color: #008c41;
            margin-left: -4.5em;
        }
    /* March 2020 - swap the margin */
    #WDContentPlaceHolder[dir="rtl"] .cbox .para {
        margin-left: 0em;
        margin-right: -4.5em;
    }


        #WDContentPlaceHolder .cbox .InlineGraphicWrapper,
        #WDContentPlaceHolder .chapter .InlineGraphicWrapper,
        #WDContentPlaceHolder .BoxTitle .InlineGraphicWrapper {
            position: absolute;
            left: 0.0em;
            top: 2.4em;
        }
/* March 2020 - Images need to be right to left too */
    #WDContentPlaceHolder[dir="rtl"] .cbox .InlineGraphicWrapper,
    #WDContentPlaceHolder[dir="rtl"] .chapter .InlineGraphicWrapper,
    #WDContentPlaceHolder[dir="rtl"] .BoxTitle .InlineGraphicWrapper {
        left: inherit;
        right: 0.0em;
    }


            #WDContentPlaceHolder .cbox .InlineGraphicWrapper img,
            #WDContentPlaceHolder .chapter .InlineGraphicWrapper img {
                width: 4.2em;
            }

    /* Relative positioning wrapper to support the title inline graphics*/
    #WDContentPlaceHolder .chapter,
    #WDContentPlaceHolder .BoxTitle {
        position: relative;
    }

        /* chapter titles */
        #WDContentPlaceHolder .chapter .ChapTitle {
            color: #008c41;
            font-size: 2.8em;
            font-weight: 300;
            padding-top: 0.5em;
            padding-bottom: 0.5em;
            padding-left: 2em;
            padding-right: 1em;
            margin-top: 1em;
            margin-bottom: 0.8em;
        }
    /* March 2020 - swap the padding to support the images */
    #WDContentPlaceHolder[dir="rtl"] .chapter .ChapTitle {
        padding-left: 1em;
        padding-right: 2em;
    }


    /* Numeric labels in chapter titles */
    #WDContentPlaceHolder .ChapTitle .LabelTitle {
        color: #008c41;
        font-size: 1.2em;
        font-weight: 700;
    }

    /* Chapter Inline Graphics */
    #WDContentPlaceHolder .chapter .InlineGraphicWrapper {
        top: 1.9em;
    }


    /* BoxTitle Inline Graphics */
    #WDContentPlaceHolder .BoxTitle .InlineGraphicWrapper {
        top: 0.7em;
        left: 0.8em;
    }
    /* March 2020 - swap for the right to left */
    #WDContentPlaceHolder[dir="rtl"] .BoxTitle .InlineGraphicWrapper {
        left: inherit;
        right: 0.8em;
    }


    #WDContentPlaceHolder .example .InlineGraphicWrapper img {
        width: 1.5em;
    }

    #WDContentPlaceHolder .tale .InlineGraphicWrapper img {
        width: 1.7em;
    }


    /* Boxes - Examples and Cautionary tables*/
    #WDContentPlaceHolder .example {
        background-color: #cae0cc;
    }

    #WDContentPlaceHolder .tale {
        background-color: #c7c8cb;
    }

    #WDContentPlaceHolder .BoxText {
        padding-top: 0em;
        padding-bottom: 0.4em;
    }

        #WDContentPlaceHolder .BoxText .para {
            padding-top: 0.2em;
            padding-bottom: 0.2em;
            padding-left: 0.8em;
            padding-right: 0.8em;
        }

    #WDContentPlaceHolder .BoxTitle {
        color: #ffffff;
        font-size: 1.2em;
        padding-left: 2.8em;
        padding-top: 0.0em;
        padding-bottom: 0.2em;
    }
    /* March 2020 - swap the box title around */
    #WDContentPlaceHolder[dir="rtl"] .BoxTitle {
        padding-left: 0.5em;
        padding-right: 2.8em;
    }


    #WDContentPlaceHolder .example .BoxTitle {
        background-color: #46a060;
    }

    #WDContentPlaceHolder .tale .BoxTitle {
        background-color: #949599;
    }

    /* Guidance notes sub-headers*/
    #WDContentPlaceHolder .note .LabelTitle {
        padding-left: 0.35em;
        padding-right: 0.1em;
        margin-right: 0.3em;
        color: #ffffff;
        background-image: url("data:image/svg+xml;utf8,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' xml:space='preserve'><circle cx='50' cy='50' r='50' stroke='none' fill='%23008c41' /></svg>");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100% !important;
    }
    /* March 2020 - swap the padding around for rtl*/
    #WDContentPlaceHolder[dir="rtl"] .note .LabelTitle {
        padding-left: 0.1em;
        margin-left: 0.3em;
        padding-right: 0.35em;
        margin-right: 0em;
    }
      
/* Hide the prelim and back-matter titles */
#WDContentPlaceHolder .front-matter .ChapTitle, #WDContentPlaceHolder .back-matter .ChapTitle {
    display: none;
}

    /* Sub headings in key sections */
    #WDContentPlaceHolder .key-action .ChapTitle,
    #WDContentPlaceHolder .key-indicator .ChapTitle,
    #WDContentPlaceHolder .guidance-note .ChapTitle,
    #WDContentPlaceHolder .cbox-sub .ChapTitle,
    #WDContentPlaceHolder .key .ChapTitle,
    #WDContentPlaceHolder .nostyle .ChapTitle,
    #WDContentPlaceHolder .commitment .ChapTitle {
        color: #008c41;
        font-size: 1.8em;
    }

    #WDContentPlaceHolder .note .ChapTitle {
        color: #008c41;
        font-size: 1.3em;
        margin-top: 1.3em;
        margin-bottom: 0.3em;
    }

    /* Appendices and the index */
    #WDContentPlaceHolder .app-level-A .ChapTitle,
    #WDContentPlaceHolder .Glossary .ChapTitle {
        color: #008c41;
        font-size: 2.2em;
        font-weight: 300;
        padding-top: 0.8em;
        padding-bottom: 0.8em;
    }

/* To support links within pages we need to add an offset from the top of the page to avoid the header */
:target:before {
    content: "";
    display: block;
    height: 90px; /* fixed header height*/
    margin: -90px 0 0; /* negative fixed header height */
}

/* March-2020 References in reference lists are always left aligned*/
#WDContentPlaceHolder .ParaFootnote {
    margin-left: 2em;
}
#WDContentPlaceHolder .LabelFootnote {
    position: absolute;
    left: 0em;
}
#WDContentPlaceHolder .ParaFootnote, #WDContentPlaceHolder .LabelFootnote {
    direction: ltr;
    text-align: left;
}