/* ####################################
   Page Body Content 
    
   - Critical Rendering Path: Recommended
   - Primary and Secondary content divs and elements inside them
   - Careful with specificity when using div IDs
   ################################## */

main {
    /* Includes #Primary.primary and #Secondary.secondary */
}

    main a:link {
    }

        main p a:link {
            /* Links in paragraphs sometimes behave differently. */
        }

    #Primary {
    }

        #Primary #PageTitle {
            margin: 0;
            padding: var(--site-padding-thinner) 0;
        }

        #Primary #PageSummaryIntro {
            font-size: 1.5em;
	        padding: var(--site-padding-thick);
	        margin-bottom: 1em;
	        color: var(--site-spot-color-2);
	        background-color: var(--site-spot-color-13);
	        border-left: var(--site-spot-color-2) 8px solid;
	        border-radius: 4px;
        }

        #Primary .containers:not(.cards):not(.tiles) .title a,
        #Primary .sub-containers:not(.cards):not(.tiles) .title a {
            padding-left: 10px;
        }

            #Primary .containers:not(.cards):not(.tiles) .title a:before,
            #Primary .sub-containers:not(.cards):not(.tiles) .title a:before {
                content: "";
                border-color: transparent var(--site-spot-color-1);
                border-style: solid;
                border-width: 0.35em 0 0.35em 0.45em;
                display: inline-block;
                height: 0;
                width: 0;
                left: -0.3em;
                top: 0;
                position: relative;
            }

        #Primary #PublishInfo {
            margin: 0 0 var(--site-margin);
            font-size: var(--site-h4-font-size);
        }

            #Primary #PublishInfo .date {
                display: inline;
            }

                #Primary #PublishInfo .date:not(:last-child) {
                    /* An author tag can appear after the date, but it might wrap around lines so we don't want the spacer margin on the left of the author tag. */
                    margin-right: var(--site-padding-thinner);
                }

            #Primary #PublishInfo .author {
                display: inline;
            }

        #Primary #PageBody {
        }

            #Primary #PageBody > :first-child {
                margin-top: 0 !important;
            }

            #Primary #PageBody.summary-field {
                /* When there's no Page Body content and the summary field is displayed instead */
                margin: 0 0 var(--site-box-margin-bottom);
            }
      
    #Secondary {
    }

/* Make sure spacing at the top and bottom of everything is consistent no matter what element starts or finishes the page. */

#PrimaryContent > :first-child, 
#SecondaryContent > :first-child {
    margin-top: 0 !important;
}

#PrimaryContent > :last-child, 
#SecondaryContent > :last-child,
#PrimaryContent .editable > :last-child,
#SecondaryContent .editable > :last-child {
    margin-bottom: 0 !important;
}

#PrimaryContent #PageBody ul:not([class]) li, 
#PrimaryContent #PageBody ol:not([class]) li, 
#SecondaryContent ul:not([class]) li, 
#SecondaryContent ol:not([class]) li {
    margin: 1em 0;
}

/* Highlighted search keywords (only highlighted within page content */

main .cmHighlight,
main .cmhighlight {
    border-bottom: 3px double;
}

/* ############################################################################
   ## 
   ##  LAYOUT FOR DIFFERENT SCREENS
   ##
   ##  Be sure to co-ordinate these layouts with the responsive sizes used in all templates in the site, or you'll run into trouble.
   ##
   ######################################################################### */

@media screen and (max-width: 900px) {

}