/*
var width = document.getElementById("container").offsetWidth;
    width =        Portrait Landscape
Moto g6            360      672
Pixel 2 XL         412      775
iPhone 12 Pro Max  428      832
Pixel 3A XL        432      816
iPad               768      1024
iPad Pro 12.9      1024     1366
Standard Laptop             1366
HD Laptop                   1920
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
} 
/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
} 

/* end of reset section */


   /*#####     ####################################################
   #######     ####################################################
   #######     ####################################################
   #######     ##################################################*/

.mainContainer {
	display:flex;
    flex-direction:column;
    height:100%;
    width: 100%;
    font-family: Verdana, Tahoma, sans-serif;
    line-height: 1.4;
    margin: auto;
}

h3 {
    font-weight: bold;
    padding-bottom:1vw;
}

a {
	text-decoration: none;
}

.blue {
    color:#0000FF;
}


/* ============================================================
   DOCUMENT CONTENT STYLES
   Used by safeguarding.php and any other long-form policy pages.
   All rules are scoped to .textArea to avoid affecting other pages.
   ============================================================ */

/* CRITICAL: allow very long unbreakable strings (URLs, email
   addresses) to wrap. Without this, their full length sets the
   minimum content width of the floated .textArea, forcing it
   wider than the viewport on phones (horizontal scrolling).
   'anywhere' also reduces the min-content width used by the
   float's shrink-to-fit sizing; 'break-word' is the fallback
   for older browsers. Inherited by all descendants. */
.textArea {
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
}

/* The site-wide reset zeroes <strong>/<b> to font:inherit, which
   strips their default bold. Restore it explicitly so bold text
   doesn't depend on accidentally sitting inside an already-bold
   parent (e.g. a bold table cell). */
.textArea strong,
.textArea b {
    font-weight: bold;
}

/* Page title and metadata */
.textArea h2.pageTitle {
    font-weight: bold;
    font-size: 1.3em;
    margin-bottom: 0.3em;
    line-height: 1.3;
}

.textArea p.docMeta {
    color: #555;
    font-size: 0.85em;
    margin-bottom: 0.6em;
}

.textArea p.docNote {
    font-style: italic;
    font-size: 0.85em;
    color: #555;
    border-left: 3px solid #ccc;
    padding-left: 0.8em;
    margin-bottom: 1.5em;
    box-sizing: border-box;
}

/* Section headings */
.textArea h3 {
    font-weight: bold;
    font-size: 1.1em;
    margin: 1.6em 0 0.5em 0;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.3em;
}

.textArea h4 {
    font-weight: bold;
    font-size: 1em;
    margin: 1.2em 0 0.4em 0;
}

.textArea h5 {
    font-weight: bold;
    font-size: 0.95em;
    margin: 1em 0 0.4em 0;
}

/* Body text */
.textArea p {
    margin-bottom: 0.8em;
    line-height: 1.6;
}

/* Bullet/numbered lists - restore list-style killed by reset */
.textArea ul {
    list-style: disc;
    margin: 0.4em 0 0.9em 1.6em;
    line-height: 1.6;
}

.textArea ol {
    list-style: decimal;
    margin: 0.4em 0 0.9em 1.6em;
    line-height: 1.6;
}

.textArea li {
    margin-bottom: 0.35em;
}

/* Nested ordered list (contents) */
.textArea ol ol {
    list-style: lower-alpha;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

/* DO NOT list - bold red for prominence */
.textArea ul.doNotList {
    list-style: none;
    margin-left: 0;
    padding: 0.6em 0.8em;
    background: #fff5f5;
    border-left: 4px solid #cc0000;
    margin-bottom: 0.9em;
    box-sizing: border-box;
}

.textArea ul.doNotList li {
    font-weight: bold;
    color: #cc0000;
    padding: 0.15em 0;
}

.textArea ul.doNotList li::before {
    content: "✕  ";
}

/* Blockquotes */
.textArea blockquote {
    margin: 0.8em 0 0.8em 1em;
    padding: 0.6em 1em;
    border-left: 3px solid #5C5C8A;
    color: #333;
    font-style: italic;
    line-height: 1.6;
    box-sizing: border-box;
}

.textArea blockquote cite {
    display: block;
    font-style: normal;
    font-size: 0.85em;
    color: #666;
    margin-top: 0.4em;
}

/* Abuse type definitions */
.textArea dl.abuseTypes {
    margin: 0.5em 0 1em 0;
}

.textArea dl.abuseTypes dt {
    font-weight: bold;
    margin-top: 0.7em;
}

.textArea dl.abuseTypes dd {
    margin-left: 1.2em;
    line-height: 1.6;
}

/* Legislation note */
.textArea p.legislationNote {
    font-style: italic;
    color: #444;
    margin: 0.3em 0 0.8em 0;
}

/* Emergency box */
.textArea .emergencyBox {
    border: 3px solid #cc0000;
    background: #fff0f0;
    padding: 0.8em 1em;
    margin: 1em 0;
    text-align: center;
    box-sizing: border-box;
}

.textArea .emergencyBox p {
    font-weight: bold;
    font-size: 1.05em;
    color: #cc0000;
    margin: 0;
}

.textArea .emergencyBox a {
    color: #cc0000;
    text-decoration: underline;
    font-weight: bold;
}

/* Contact cards */
.textArea .contactCard {
    background: #f4f4f8;
    border-left: 4px solid #5C5C8A;
    padding: 0.7em 1em;
    margin: 0.7em 0 1em 0;
    line-height: 1.7;
    box-sizing: border-box;
}

.textArea .contactCard p {
    margin: 0;
}

.textArea .contactCard a {
    color: #5C5C8A;
    text-decoration: underline;
}

/* Details table (Section 1)
   NOTE: no white-space:nowrap here - it must be free to wrap on
   phones or it sets a huge minimum width on the floated textArea.
   nowrap for the label column is applied desktop-only, in the
   >=1023px media query below. */
.textArea table.detailsTable {
    width: 100%;
    margin: 0.8em 0 1.2em 0;
    border-collapse: collapse;
    line-height: 1.6;
    box-sizing: border-box;
}

.textArea table.detailsTable td {
    padding: 0.4em 0.6em;
    vertical-align: top;
    border-bottom: 1px solid #eee;
}

.textArea table.detailsTable td:first-child {
    font-weight: bold;
    width: 30%;
    color: #444;
}

/* Cells spanning both columns (e.g. the church name/denomination
   header row) must not inherit the narrow first-child width, or
   their text wraps into a cramped one-word-per-line column. */
.textArea table.detailsTable td[colspan] {
    width: 100%;
    font-weight: normal;
    color: inherit;
    white-space: normal;
}

/* Contacts table (Section 5.4) */
.textArea table.contactsTable {
    width: 100%;
    margin: 0.8em 0 1.2em 0;
    border-collapse: collapse;
    line-height: 1.6;
    box-sizing: border-box;
}

.textArea table.contactsTable td {
    padding: 0.5em 0.6em;
    vertical-align: top;
    border-bottom: 1px solid #eee;
}

.textArea table.contactsTable td:first-child {
    width: 35%;
    font-weight: bold;
    color: #333;
}

.textArea table.contactsTable a {
    color: #5C5C8A;
    text-decoration: underline;
}

/* Signatures table
   NOTE: as above, no white-space:nowrap in the base styles. */
.textArea table.signaturesTable {
    margin: 1em 0;
    border-collapse: collapse;
    line-height: 1.8;
}

.textArea table.signaturesTable td {
    padding: 0.3em 1em 0.3em 0;
    vertical-align: top;
}

.textArea table.signaturesTable td:first-child {
    font-weight: bold;
}

/* Contents nav */
.textArea nav.docContents {
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: 1em 1.2em;
    margin: 1em 0 1.6em 0;
    display: block;
    box-sizing: border-box;
    width: 100%;
}

.textArea nav.docContents h3 {
    font-size: 1em;
    border-bottom: none;
    margin-top: 0;
    padding-bottom: 0.3em;
}

.textArea nav.docContents ol {
    list-style: decimal;
    margin-left: 1.2em;
}

.textArea nav.docContents ol ol {
    list-style: decimal;
    margin-top: 0.1em;
}

.textArea nav.docContents a {
    color: #5C5C8A;
    text-decoration: none;
}

.textArea nav.docContents a:hover {
    text-decoration: underline;
}

.textArea p.folderNote {
    font-size: 0.85em;
    color: #666;
    font-style: italic;
    margin: 0.8em 0 0 0;
}

/* Appendix sections */
.textArea #appendices section {
    margin-bottom: 1.2em;
}

/* Links within body text */
.textArea a {
    color: #5C5C8A;
    text-decoration: underline;
}

.textArea a:hover {
    color: #000;
}


/*
   ##    ##   #####     
   ##    ##   ##   ##   
   ##    ##   ##    ##  
   ########   ##    ##  
   ##    ##   ##    ##  
   ##    ##   ##   ##   
   ##    ##   #####     
*/



@media DISABLED screen and (min-width:1910px) and (max-width:6000px) { /* 1920 x 1080 (HD laptop or monitor) with Firefox maximized */

}



/*
     ##   ######     ###       ##     
    ###       ##   ##        ##  ##   
     ##      ##   ## ##     ##    ##  
     ##   ####    ###  ###  ##    ##  
     ##       ##  ##    ##  ##    ##  
     ##       ##   ##  ##    ##  ##   
     ##   ####       ##        ##     
*/



@media DISABLED screen and (min-width:1360px) and (max-width:1909px) { /* widescreen 1366 x 768 (#### ORDINARY LAPTOP ####) with Firefox or Chrome maximised */
 
}

 

/*
           #####         #         #####       ###################            ##
     ##    ##   ##      ###        ##  ##      #                 #           #### 
           ##    ##    ## ##       ##   ##     #                 #          ##  ##
     ##    ##   ##    ##   ##      ##    ##    #                 #         ## ## ##
     ##    #####     #########     ##   ##     #                 #        ##  ##  ##
     ##    ##       ##       ##    ##  ##      #                 #            ##
     ##    ##      ##         ##   #####       ###################            ##
*/



@media screen and (min-width:1023px)  { /* and (max-width:1359px)   iPad 4 landscape */

    .mainContainer {			 /* header&menu2.php - closed in footer.php */
        max-width: 1400px;
        font-size:18px;
    }

    .bannerDiv {
        margin:2vw 2vw 0vw 2vw; 
        background: #FFFFFF;
    }

    .topImage {
        display:inline;
        width: 76%;
    }

    .lowerImage {
        display:none;
    }

    .logo {
        float:left;
        width:22%;
        margin:0% 2% 0% 0%;
        cursor: pointer;
    }

    .menuRevealIconBut {
        width:0px;
    }

    .menuDivClosed, .menuDivOpen { /* open and closed the same - continous display */
        display:none;
    }

    .sideMenuDiv {
    	width:24%;
        background: #FFFFFF;
    }

    .menuButs {
    	width:220px;
    	height:30px;
    	padding:0px 10px 20px 0px;
    	margin:2px;
        color:#5C5C8A;
        background:#FFFFFF;
    }

    .menuButsSel {
        width:220px;
        height:30px;
        padding:0px 10px 20px 0px;
        margin:2px;
        color:#000000;
        background:#FFFFFF;
    }

    .contentDiv {
        margin: 2vw 2vw 0vw 2vw;
        display:flex;
    }

    .textArea {
        flex:1;
        float:left;
        margin: 0vw 0vw 4vw 0vw;
        background: #FFFFFF;
    }

    .textAreaCovid {
        flex:1;
        padding: 2vw 2vw 2vw 2vw;
        float:left;
        background: #FFC000;
    }

    .expandingArea textarea {
    	font-family: Verdana, Tahoma, sans-serif;
      	line-height: 1.4;
      	font-size:18px;
    }

    .map {
      float:right;
      height: 53vh;
      width: 45%;
    }

    .navigateSelector {
        float:left;
        margin:0vw 1vw 0vw 1vw;
        width:110px;
        height:27px;
        border: green solid 1px;
        cursor:pointer;
        background:#F0F0F0;
        padding:10px;
    }

    .covidBut {
        display:none;
    }

    .covidMenuBut {
        margin:10px 0vw 30px 0vw;
        width:100px;
        height:27px;
        border: black solid 1px;
        cursor:pointer;
        background:#FFC000;
        padding:10px;
    }

    .covidMenuButHide {
        display:none;
    }

    /* Document-specific, desktop only: keep the label column on
       one line and constrain its width. Safe here because desktop
       has plenty of room; must NOT appear in base styles. */
    .textArea table.detailsTable td:first-child,
    .textArea table.contactsTable td:first-child {
        width: 28%;
        white-space: nowrap;
    }

    .textArea table.signaturesTable td:first-child {
        white-space: nowrap;
    }
}


/*
           #####         #         #####         ########        #####     ##    ##   ######   ##    ##  #######       ################## 
     ##    ##   ##      ###        ##  ##        #      #        ##   ##   ##    ##  ##    ##  ###   ##  ##            #                # 
           ##    ##    ## ##       ##   ##       #      #        ##    ##  ##    ##  ##    ##  ####  ##  ##            #                # 
     ##    ##   ##    ##   ##      ##    ##      #      #        ##   ##   ########  ##    ##  ## ## ##  #######       #                # 
     ##    #####     #########     ##   ##       #      #        #####     ##    ##  ##    ##  ##  ####  ##            #                # 
     ##    ##       ##       ##    ##  ##        #      #        ##        ##    ##  ##    ##  ##   ###  ##            #                # 
     ##    ##      ##         ##   #####         ########        ##        ##    ##   ######   ##    ##  #######       ################## 
*/



@media screen and (min-width:600px) and (max-width:1022px) { /* Smartphone landscape */

	.mainContainer {
        font-size:2.1vw;
    }

    .bannerDiv {
        margin:3vw 3vw 3vw 3vw;
        background-color: #FFFFFF;
    }

    .topImage {
        margin-left:4%;
        display:inline;
        width: 48%;
    }

    .lowerImage {
        display:none;
    }

    .logo {
        float:left;
        width:26%;
        cursor: pointer;
    }

    .menuRevealIconBut {
        float:right;
        width:9.5%;
    }

    .menuDivClosed, .menuDivOpen {
        position:absolute;
        z-index:1000;
        right:20px;
        top:20px;
        white-space:nowrap;
        overflow:hidden;
        background:#F0F0F0;
    }

    .menuDivClosed {
        width:0px;
        height:0px;
    }

    .menuDivOpen {
        width:210px;
        padding:10px;
    }

    .sideMenuDiv {
        display:none;
    }

    .menuButs, .menuButsSel, .menuButsCorona, .menuButsCoronaSel {
    	color:#5C5C8A;
    	width:185px;
    	height:30px;
    	padding:10px;
    	margin:2px;
    }

    .contentDiv {
        margin-left:3vw;
        margin-right:3vw;
        background-color:#FFFFFF;
    }

    .textArea {
        flex:1;
        float:left;
        margin: 0vw 0vw 3vw 0vw;
    }

    .textAreaCovid {
        flex:1;
        float:left;
        padding: 2vw 2vw 2vw 2vw;
        background:#FFC000;
    }

    .expandingArea textarea {
    	font-family: Verdana, Tahoma, sans-serif;
      	line-height: 1.4;
      	font-size:2.1vw;
    }

	.map {
      float:right;
	  height: 53vh;
	  width: 45%;
	}

    .navigateSelector {
        float:left;
        margin:0vw 0vw 0vw 3vw;
        width:12vw;
        border: green solid 1px;
        cursor:pointer;
        background:#F0F0F0;
        padding:8px;
    }

    .covidMenuBut {
        display:none;
    }

    .covidBut {
        float:right;
        margin:0vw 0vw 0vw 2vw;
        border: black solid 2px;
        cursor:pointer;
        background:#FFC000;
        padding:7px;
    }

    /* Document-specific: table column widths on landscape */
    .textArea table.detailsTable td:first-child,
    .textArea table.contactsTable td:first-child {
        width: 35%;
    }
} 


/*
     #####     ##    ##   ######   ##    ##  #######       ######## 
     ##   ##   ##    ##  ##    ##  ###   ##  ##            #      # 
     ##    ##  ##    ##  ##    ##  ####  ##  ##            #      # 
     ##   ##   ########  ##    ##  ## ## ##  #######       #      # 
     #####     ##    ##  ##    ##  ##  ####  ##            #      # 
     ##        ##    ##  ##    ##  ##   ###  ##            #      # 
     ##        ##    ##   ######   ##    ##  #######       ######## 
*/



@media screen and (max-width:599px) { /* Smartphone portrait */

    .mainContainer {
        font-size:4vw;
    }

    .bannerDiv {
        margin:4vw 4vw 5vw 4vw;
        background-color: #FFFFFF;
    }

    .topImage {
        display:none;
    }

    .lowerImage {
        padding-top:3vw;
        display:block;
        width: 100%;
    }

    .logo {
        float:left;
        width:50%;
        cursor: pointer;
    }

    .menuRevealIconBut {
        float:right;
        width:18%;
    }

    .menuDivClosed, .menuDivOpen {
        position:absolute;
        z-index:1000;
        right:20px;
        top:20px;
        white-space:nowrap;
        overflow:hidden;
        background:#F0F0F0;
    }

    .menuDivClosed {
        width:0px;
        height:0px;
    }

    .menuDivOpen {
        width:210px;
        padding:10px;
    }

    .sideMenuDiv {
        display:none;
    }

    .menuButs, .menuButsSel, .menuButsCorona, .menuButsCoronaSel {
    	color:#5C5C8A;
    	width:185px;
    	height:30px;
    	padding:10px;
    	margin:2px;
    }

    .contentDiv {
        margin-left:4vw;
        margin-right:4vw;
        background-color:#FFFFFF;
    }

    .textArea {
        flex:1;
        float:left;
        margin: 0vw 0vw 6vw 0vw;
    }

    .textAreaCovid {
        flex:1;
        float:left;
        padding: 2vw 2vw 2vw 2vw;
        background:#FFC000;
    }

    .expandingArea textarea {
    	font-family: Verdana, Tahoma, sans-serif;
      	line-height: 1.4;
      	font-size:4vw;
    }

	.map {
	  height: 85vw;
	  width: 100%;
	}

    .navigateSelector {
        float:right;
        margin:0px 2vw 0vw 0vw;
        width:22vw;
        border: green solid 1px;
        cursor:pointer;
        background:#F0F0F0;
        padding:8px;
    }

    .covidMenuBut {
        display:none;
    }

    .covidBut {
        float:right;
        margin:0vw 0vw 0vw 0vw;
        border: black solid 1px;
        cursor:pointer;
        background:#FFC000;
        padding:7px;
    }

    /* Document-specific: stack all tables to single column on portrait phones */
    .textArea table.detailsTable,
    .textArea table.detailsTable tbody,
    .textArea table.detailsTable tr,
    .textArea table.detailsTable td,
    .textArea table.contactsTable,
    .textArea table.contactsTable tbody,
    .textArea table.contactsTable tr,
    .textArea table.contactsTable td,
    .textArea table.signaturesTable,
    .textArea table.signaturesTable tbody,
    .textArea table.signaturesTable tr,
    .textArea table.signaturesTable td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        white-space: normal;
    }

    .textArea table.detailsTable td:first-child,
    .textArea table.contactsTable td:first-child,
    .textArea table.signaturesTable td:first-child {
        width: 100%;      /* must be repeated here: same-specificity
                              tie with the base rule's 30%/35% width
                              is won by source order, not the grouped
                              stacking rule, which has lower specificity */
        font-weight: bold;
        padding-bottom: 0.1em;
        border-bottom: none;
        white-space: normal;
    }

    .textArea table.detailsTable tr,
    .textArea table.contactsTable tr,
    .textArea table.signaturesTable tr {
        border-bottom: 1px solid #eee;
        padding: 0.4em 0;
        margin-bottom: 0.3em;
    }

    .textArea blockquote {
        margin-left: 0.3em;
        box-sizing: border-box;
    }
}