/* @import url('media/templates/site/www/fonts/orange juice 2.0.woff'); */
@font-face {
    font-family: 'Roboto';
    src: local('Roboto'),
    url('/fonts/Roboto/Roboto-Light.ttf') format('truetype');
}
* { box-sizing: border-box; } /* Switch to border-box for box-sizing. */
:root {
    --base-url: 'https://pennyferrytraining.com';
    --color-font: rgba(34, 34, 34, 1);
	--color-font-inverse: rgba(255, 255, 255, 1);
	--color-heading: rgba(34, 34, 34, 1);
	--color-link: rgba(3, 155, 229, 1);
	--color-link-hover: rgba(134, 5, 255, 1);
	--color-link-active: rgba(134, 5, 255, 1);
	--color-link-visited: rgba(134, 5, 255, 1);
	--color-nav-link: rgba(37, 37, 37, 1);
	--color-nav-link-disabled: rgba(37, 37, 37, 1);
	--color-nav-link-hover: rgba(37, 37, 37, 1);
	--color-nav-link-active: rgba(37, 37, 37, 1);
	--color-nav-link-visited: rgba(37, 37, 37, 1);
	--color-nav-link-bg: rgba(0, 0, 0, 0);
	--color-nav-link-hover-bg: rgba(0, 0, 0, 0.137);
	--color-nav-link-active-bg: rgba(0, 0, 0, 0.137);
	--color-nav-link-visited-bg: rgba(0, 0, 0, 0);
	--color-primary: rgba(0,83,0,1);
	--color-secondary: rgba(108, 117, 125, 1);
	--color-success: rgba(25, 135, 84, 1);
	--color-danger: rgba(244, 67, 54, 1);
	--color-warning: rgba(255, 193, 7, 1);
	--color-info: rgba(13, 202, 240, 1);
	--color-light: rgba(250, 250, 250, 1);
	--color-dark: rgba(33, 37, 41, 1);
	--bg-page-color: transparent;
	--bg-page-img-repeat: no-repeat;
	--bg-header-color: rgb(255, 255, 255);
	--bg-header-img-repeat: no-repeat;
	--bg-breadcrumb-color: transparent;
	--bg-main-color: transparent;
	--bg-main-img-repeat: no-repeat;
	--bg-main-content-color: rgba(255, 255, 255, 1);
	--bg-footer-color: transparent;
	--bg-footer-img-repeat: no-repeat;
	--bg-popover-color: rgba(255, 255, 255, 1);
	--bg-popover-backdrop: rgba(0, 0, 0, 0.137);
	--width-content-max: 1184px;
	--width-breakout-max: 1420px;
	--h-space: 1rem;
	--v-space: 1rem;
	--font-default: 'Roboto';
	--font-header: 'comic sans ms', sans-serif;
	--size-font: 1rem;
	--height-line-heading: 1.3;
	--weight-heading: 400;
	--size-h1: 2rem;
	--size-h2: 1.75rem;
	--size-h3: 1.5rem;
	--size-h4: 1.35rem;
	--size-h5: 1.25rem;
	--size-h6: 1rem;
	--list-marker: '◉ ';
	--input-field-focus-border: rgba(0, 0, 0, 0.40);
	--input-field-font-size: 1.2rem;
	--input-field-padding-tb: 0.75rem;
	--input-field-padding-lr: 0.5rem;
	--input-field-label-margin: 0.4rem;
}

/* set background for the page */
html {
    background-color: var(--bg-page-color, transparent);
    background-image: var(--bg-page-img, none);
    background-repeat: var(--bg-page-img-repeat, no-repeat);
    background-position-x: var(--bg-page-img-position-x);
    background-position-y: var(--bg-page-img-position-y);
    background-size: var(--bg-page-size);
}
/* set background for the header */
header {
    background-color: var(--bg-header-color, transparent);
    background-image: var(--bg-header-img, none);
    background-repeat: var(--bg-header-img-repeat, no-repeat);
    background-position-x: var(--bg-header-img-position-x, 0);
    background-position-y: var(--bg-header-img-position-y, 0);
    background-size: var(--bg-header-size, cover);
    [data-grid-position=content] {
        padding: calc(var(--v-space, none) / 2) var(--h-space, none);
        @media only screen and (min-width : 769px) {
            padding: 0 var(--h-space, none);
        }
    }
    [data-layout=header-grid] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .header-text {
            text-align: center;
            flex-grow: 1;
        }
        .img-wrapper {
            max-width: 50%;
        }
        .header-text {
            order: 2;
        }
        img {
            max-width: 100%;
        }
        @media only screen and (min-width : 577px) {
            .img-wrapper {
                max-width: 20%;
            }
            .header-text {
                order: inherit;
            }            
        }
    }
}
body {
    margin: 0;
    font-family: var(--font-default, "Arial, Helvetica, sans-serif");
}
article {
    p {
        line-height: 24px;
        text-align: center;
    }
}
h1 {
    color: var(--color-primary);
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
/* set background for the breadcrumbs */
[aria-labelledby=breadcrumbs] {
    background-color: var(--bg-breadcrumb-color, transparent);
    [data-grid-position=content] {
        padding: 0 var(--h-space, none);
    }
}
/* set background for the main content wrapper area */
[aria-labelledby=article-content], [data-role=main-list] {
    background-color: var(--bg-main-color, transparent);
    background-image: var(--bg-main-img, none);
    background-repeat: var(--bg-main-img-repeat, no-repeat);
    background-position-x: var(--bg-main-img-position-x, 0);
    background-position-y: var(--bg-main-img-position-y, 0);
    background-size: var(--bg-main-size, cover);
}
/* set background for the main content text area */
[data-layout=content-grid],
[data-role=main-list] [data-layout=breakout-grid] > [data-grid-position=content] {
    background-color: var(--bg-content-color, white);
    padding: 0 var(--h-space, none);
}
/* set background for the footer */
footer {
    background-color: var(--bg-footer-color, transparent);
    background-image: var(--bg-footer-img, none);
    background-repeat: var(--bg-footer-img-repeat, no-repeat);
    background-position-x: var(--bg-footer-img-position-x, 0);
    background-position-y: var(--bg-footer-img-position-y, 0);
    background-size: var(--bg-footer-size, cover);
    border-top: 1px solid var(--color-primary);
    [data-layout=footer-grid] {
        display: flex;
        flex-wrap: wrap;
        padding: 0 var(--h-space, none);
        font-size: .85rem;
        text-align: center;
        justify-content: center;
        color: var(--color-secondary);
        @media only screen and (min-width : 577px) {
            flex-wrap: nowrap;
            align-items: center;
        }
        img {
            max-width: 100px;
        }
    }
}
/* set default list marker */
ul:not(.tags) > li::marker {
    content: var(--list-marker);
}

@media only screen and (min-width : 577px) {
    [data-layout=breakout-grid], body > * {
        &:not(dialog, [role=dialog],  [class^="phpdebugbar"], script, link, meta ) {
            --breakout-size: calc((var(--width-breakout-max) - var(--width-content-max)) / 2);
            width: 100%;
            display: grid;
            margin: 0 auto;
            grid-template-columns:
                [full-width-start] minmax(var(--h-space), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start] min(100% - (var(--h-space) *2), var(--width-content-max)) [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--h-space), 1fr) [full-width-end];
            > [data-grid-position=content] {
                grid-column: content;
            }
            > [data-grid-position=breakout] {
                grid-column: breakout;
            }
            > [data-grid-position=full-width] {
                grid-column: full-width;
            }
        }
    }
}
[data-layout=content-grid] {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 1rem;
    @media only screen and (min-width :769px) {
        &[data-full-width=false] {
            display: grid;
            width: 100%;
            margin: 0 auto;
            column-gap: var(--v-space, 1rem);
            grid-template-columns: repeat(12, 1fr);
            grid-template-areas:
            "content content content content content content content aside aside aside aside aside";
            grid-auto-rows: minmax(1em, auto);
            > [data-grid-position=content]{
                grid-area: content;
            }
            > [data-grid-position=aside]{
                grid-area: aside;
            }
        }

    }
}
.divider {
    background-color: var(--color-primary);
    height: 2rem;
}
.highlight {
    color: rgba(0,180,0,1);
    font-weight: bold;
}