/*
    The core of the SPC layout lays in the grid. If you wish to see the grid lines, use the developer tool in the web browser (F12)
    and click "show grid".

    The grid is split into 4 sections:
    Header - Contains the banner, which you will have to format and render in, and all of the school's information
    Sidebar - Contains the "Interesting Feature". This can be found in the Other Info tab on the current SPC website
    Main - Contains the School Introduction and the Second feature
    MInfo - Contains the rest of the features, as well as the data found in the Student/Community Info tab
*/
main {
    display:contents;
}

.mission {
    grid-area: mission;
    row-gap: 20px;
}

.sidebar {
    grid-area: sidebar;
}

header {
    grid-area: header;
}

.banner {
    max-width: 100%;
    max-height: 100%;
    padding: 26.8px 0px;
    /*background-color: #FDB813;*/
}

.fleximage {
    width: 100%;
    height: 66%;
}

.minfo {
    row-gap: 20px;
    grid-area: minfo;
}


.container {
    font-family: "Myriad Pro", sans-serif;
    font-size: 20px;
    row-gap: 10px;
    column-gap: 15px;
    margin: 0 auto;
    padding: 0 2%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "header header header" "sidebar mission mission" "sidebar mission mission" "minfo minfo minfo";
    max-width: 1200px;
}

/*
    This is the part of the header that contains the actual information for the school. It splits the area into thirds so that the 
    school info can be formated easily
*/
.schoolinfo {
    /*display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "area1 area2 area3";*/
    max-width: inherit;
    width: 100%;
    overflow: hidden;
}

@media screen and (max-width: 625px) {
    .schoolinfo {
        display: flex;
        flex: 0 0 100%;
        flex-flow: column;
    }

    div.info1 {
        width: 100%;
        order: 1;
    }

    div.info2 {
        width: 100%;
        order: 2;
    }

    .flex {
        flex-flow: wrap;
    }

    div.imagesmall {
        margin-left: 0px;
    }

    img.schoolDiffImage {
        width: 93%;
    }

    div.container {
        display: block;
    }
}

.info1 {
    float: left;
}

.info2 {
    width: 50%;
    float: right;
}

.closetext {
    margin-top: -1em;
    margin-bottom: 0em;
}
/*used to format the text*/
.info {
    grid-column-start: 2;
    grid-column-end: 3;
}
/* Creates the box found in the sidebar */
.sidebarbox {
    color: white;
    margin: 2px;
    padding: 0.05em 1em 1em 1em;
}
/* Creates the white box within the green sidebar box*/
.sidebarwhite {
    background: white;
    color: black;
    padding: 0.05em 1em 0.05em 1em;
}

    .sidebarwhite p {
        margin-top: 10px;
    }

.sidebarbox p {
    margin-bottom: 10px;
}

h2 {
    margin-top: 10px;
    margin-bottom: 10px;
}

h3 {
    margin-top: 10px;
    margin-bottom: 0px;
    display: inline-block;
}

.sidebarwhite h3 {
    margin-bottom: 10px;
}
/* Mainly used to format most of the boxes that contain images*/
.contentbox {
    margin: 2px;
    padding: 1em;
    overflow: auto;
}

.headingbox {
    padding: 0.25em 1em 0.25em 1em;
}
/* These set the colors for the various different types of boxes */
.green {
    background: #50a643;
}

.pearl {
    background: #FCF0D4;
}

.lblue {
    background: #E7F2E3;
}

.yellow {
    background: #FEFAC2;
}

.grey {
    background: #E3E7F2;
}

.lorange {
    background: #FDF1DA;
}

.lred {
    background: #FAE6D8;
}

.blue {
    background: #4360A9;
    color: white;
}

.lyellow {
    background: #FEFAC2;
}

.sidebarwhite div {
    margin-bottom: 25px;
}

.sidebarwhite p {
    margin-top: 0px;
    margin-bottom: 0px;
}

/* Sets an item to a vertical flexbox */
.flexcol {
    display: flex;
    flex-direction: column;
}

.flex {
    display: flex;
}

/* This was used for placeholder purposes, mainly to match the mockup template that was given to you.*/
.boxgrey {
    /*background: #CDCDCD;
    flex-grow: 2;*/
}

/* Used to format the smaller images found in the features*/
.imagesmall {
    flex-shrink: 0;
    flex-grow: 2;
    margin-left: 1em;
    width: 25%;
}

/* Used to format the larges images found in the Student/Community Info tab*/
.imagelarge {
    flex-shrink: 0;
    flex-grow: 2;
    margin-left: 1em;
    width: 40%;
}

/* used to format the sections with large images*/
.newstype {
    padding: 1em 0em 1em 1em;
}

/* used for the mockup, where there was a list using headers. For example
    1)Text <-- H3
      Paragraph <-- p

    This can be achieved using the bracket class with an ordered list. For example
    <ol class="bracket">
    <li>
    <h3>Text</h3>
    <p>Paragraph</p>
    </li>
    </ol>
    
    The example above would achieve what was given in the first example and can be applied to the mockup if necessary
*/
ol.bracket {
    counter-reset: list;
    padding: 0em;
    margin: 0em;
}

    ol.bracket > li {
        list-style: none
    }

        ol.bracket > li:before {
            font-weight: bold;
            font-size: 1.17em;
            content: counter(list) ") ";
            counter-increment: list;
        }

/*
    Used for the additional info section.
*/
ul.twocol {
    columns: 2;
    column-gap: 2em;
    -webkit-columns: 2;
    -moz-columns: 2;
}

.infoImages {
    width: 100% !important;
    height: inherit;
    object-fit:contain;
}

.schoolDiffImage {
    width: 100%;
    height: auto;
    object-fit:contain;
}

.schooldifImg {
    flex-shrink: 0;
    flex-grow: 2;
 /*   margin-left: 1em; */
    width: 40%;
}

#header1 {
    color: black;
    text-align: left;
}

.closetext {
    color: black;
    text-align: left;
}

#moreInfoh2 {
    margin-left: 0.5em;
}

.imageDiv {
  /*    width: 1200px;
  height: 300px;*/
	max-width: 100%;
}

.bannerImg {
    /*
    max-height: 50%;*/
    width: 100%;
    object-fit: contain;
}

.headingboxContent {
    margin-right: 10px;
}

@media print {
    /*h1#header1, p.closetext {
        color: #FDB813;
        text-shadow: 0 0 0px white;
    }*/

    .sidebarwhite div {
        margin-bottom: 5px;
    }

    .schoolinfo {
        display: flex;
        font-size: 12pt;
    }

    div.info1 {
        width: 100%;
        order: 1;
    }

    div.info2 {
        width: 100%;
        order: 2;
    }

    /*div.imagesmall {
        display:none;
    }

    img {
        display: none;
    }*/

    div.container {
        display: block;
    }

    div.newstype, div.headingboxContent {
        break-inside: avoid;
        page-break-before: auto;
        resize: none;
        font-size: 12pt;
        overflow: visible;
    }

    div.contentbox, div.additionalContent {
        break-inside: avoid;
        page-break-after: auto;
        page-break-before: auto;
        resize: none;
        font-size: 12pt;
        overflow: auto;
        margin-bottom: 1em;
    }

    h2 {
        font-size: 20pt;
    }

    p {
        break-inside: avoid;
        overflow: visible;
    }

    body, div {
        width: auto;
        border: 0;
        padding: 0;
        float: none;
        position: static;
        overflow: visible;
        font-size: 12pt;
        page-break-before: auto;
    }

    .contentbox p div {
        display: inline;
    }

    .flex {
        display: block;
    }

    .flexcol {
        display: block;
    }

    .imagesmall {
        float: right;
        padding: 5px;
        margin-left: 0px;
        break-inside: avoid;
        page-break-after: auto;
        page-break-before: auto;
        overflow: hidden;
        margin-top: 15px;
    }

    .schooldifImg {
        float: right;
        width: 15%;
        break-inside: avoid;
        page-break-after: auto;
        page-break-before: auto;
        overflow: hidden;
        object-fit:contain;
    }

    .contentboxParagraph {
        float: left;
        width: 70%;
    }

    .headingboxContent {
        float: left;
        width: 80%;
    }

    .contentbox::after, .additionalContent::after {
        content: "";
        clear: both;
        display: table;
    }

    .schoolDiffImage {
        width: 100%;
        height: auto;
        object-fit:contain;
    }

    .headingbox {
        break-inside: avoid;
    }


    /* To keep the background and colours in print mode*/
    * {
        -webkit-print-color-adjust: exact !important; /* Chrome, Safari, Edge */
        color-adjust: exact !important; /*Firefox*/
    }
}