/* set defaults */

:root {
  --dkgreen: #22522E;
  --ltgreen: #9BD96C;
  --green: #42AD4C;
  --padding: 10px 0 10px 20px;
}

html, body, h1, h2, h3, h4, h5, h6, img, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    /* for mobiles */
    -webkit-text-size-adjust: none;
}

@font-face {
    font-family: Delius;
    src: url(../font/Delius-Regular.ttf)
}

body {
    width: 100%;
    min-width: 100%;
    color: #000;
    background-color: #fff;
    font-family: Delius, Calibri, Arial;
    font-size: 100%;
}

a:link {
    text-decoration: none;
    outline: 0;
    color: #000;
}

a:visited {
    color: #000;
}

a:hover {
    color: #fff;
    background-color: #9BD96C;
}

a:active {
    color: #fff;
    background-color: #9BD96C;
}

img {
    max-width: 100%;
    height: auto;
}

li {
    list-style-type: none;
}

.line {
    margin: 0 auto;
    width: 90%;
    border-bottom: solid 1px #c0c0c0;
}

/* page templates */

#top {
    height: 50px;
    width: 100%;
    color: #fff;
    background-color: var(--green);
    display: flex;
    justify-content: space-between;
    align-items:center; /* align items with spacing up and down */
}

#top #quote {
    margin-left:25px;
}

#top #translate {
    margin-right:25px;
}

/*
https://www.3schools.in/2021/02/how-to-customize-google-translate.html

list of languages
https://cloud.google.com/translate/docs/languages
*/

#top #google_translate_element {
  background-color: transparent;
}

#google_translate_element select {
  /* drop down menu */
  color: var(--dkgreen);
  background-color: #fff;
  font-size: 125%;
  font-weight: bold;
  outline: 0;
  padding: 7.5px 0;
  border-radius: 3px;
  border: none;
  border:0;
  width:100%;
  float:right;
}

.goog-logo-link, .goog-te-gadget span, goog-te-banner-frame {
  display: none !important;
}

.goog-te-gadget {
  color: transparent !important;
  font-size: 0;
}

/* 1920×1080 */
#wrapper {
    width: 98%;
    margin: 0 auto;
    max-width: 1920px;
    background-color: transparent;
}

header {
    color: var(--dkgreen);
    text-align: center;
    position: relative; /* for logo / character image */
}

header h1 {
    font-size: 350%;
    padding-top: 10px;
}

header h2 {
    margin-top: 15px;
}

header span { /* contact  info */
    margin-top: 17.5px;
    display: block;
}

header > span:nth-of-type(2) {
    margin-top: 15px;
}

header span img {
    vertical-align: middle;
    margin-right: 5px;
}

header h6 {
    margin-top: 20px;
}

header h6 span { /* contact names */
    margin-top: 7.5px;
    font-size: 125%;
}

header h6 span:last-of-type {
    margin-bottom:25px;
}

header #logo {
    position: absolute;
    top: -10px;
    left: 0;
}

header #character1 {
    position: absolute;
    top: 125px;
    right: 100px;
    width:137px;
    height:auto;
}

nav {
    margin: 15px auto; /* center nav */
    font-size: 125%;
    text-align: center;
    display: flex; /* make the flex container display inline */
    justify-content: space-between;
    align-items:center; /* align items with spacing up and down */
    width:70%;
}

.dropdown {
    position: relative;
}

.dropdown span, .dropdown-content a {
    padding: 12.5px 0;
    background-color: var(--ltgreen);
    border-bottom: solid 2px var(--green);
    border-radius: 5px;
    transition: background-color 0.7s ease;
    font-weight: bold;
    display: block;
    width: 175px;
    cursor: pointer;
}

.dropdown:nth-child(1) span {
    background-color: #B78EAD;
    border-bottom: solid 2px #C000C0;
}

.dropdown:nth-child(1) span:hover {
    background-color: #C000C0;
}

.dropdown:nth-child(2) span {
    background-color: #69B75A;
    border-bottom: solid 2px #008000;
}

.dropdown:nth-child(2) span:hover {
    background-color: #008000;
}

.dropdown:nth-child(3) span {
    background-color: var(--ltgreen);
    border-bottom: solid 2px var(--green);
}

.dropdown:nth-child(3) span:hover {
    background-color: var(--green);
}

.dropdown:nth-child(4) span {
    background-color: #F4BA32;
    border-bottom: solid 2px #999900;
}

.dropdown:nth-child(4) span:hover {
    background-color: #999900;
}

.dropdown:nth-child(5) span {
    background-color: #FB5752;
    border-bottom: solid 2px #C00000;
}

.dropdown:nth-child(5) span:hover {
    background-color: #C00000;
}

/* global settings on nav hover */
.dropdown span:hover a {
    color: #fff;
    background-color: transparent;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: transparent;
    z-index: 1;
}

/* show dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content a:hover {
    color: #fff;
    background-color: #42AD4C;
}

#main {
    margin: 10px 0;
    font-size: 125%;
    color: #202020;
}

footer {
    width: 100%; /* content out of wrapper */
    min-width: 100%;
    margin-top: 10px;
    padding: 15px 0;
    text-align: center;
    color: #fff;
    background-color: var(--dkgreen);
    position: relative; /* for character image */
}

footer #character3 {
    position: absolute;
    top: 75px;
    left: 175px;
}

footer .line {
    margin: 10px auto;
    width: 20%;
    border-bottom: solid 1px #C0C0C0;
}

footer address {
    width: 50%;
    margin: 10px auto;
    font-style: normal;
}

footer address span {
    margin: 7.5px 0;
    display: block;
}

footer address span:last-of-type {
    margin-top: 10px;
}

footer img {
    padding-right: 5px;
    vertical-align: middle;
}

footer p { /* links at bottom */
    margin: 5px 0;
    font-weight: bold;
    font-size: 85%;
}

footer a:link, footer a:visited, footer a:hover, footer a:active {
    color: #fff;
    background-color: transparent;
}

/* headings */
#main #statement h2, .headers h2, .headers h5, #tab_header h5 {
    color: #fff;
    background-color: var(--dkgreen);
    margin: 7.5px 0;
    padding: var(--padding);
    box-sizing: border-box;
}

.headers h2 { /* curriculum vision & important news */
    padding: var(--padding);
}

.headers h5, #tab_header h5 { /* pre school, important links and other pages */
    width: 100%;
    padding: var(--padding);
    text-align: center;
}

.main_right aside .headers h2 { /* for tablets / mobiles */
    display: none;
}

#tab_header h5 { /* other pages */
    margin-top: 12.5px;
}

/* home page */
#announcement {
    background-color: #9BD96C;
    text-align: center;
}

#announcement h2 {
    padding-top: 10px;
}

#announcement p {
    font-weight: bold;
    padding: 10px;
    margin: 0;
}

.container .slides li img {
    width:100%;
    height:600px;
}

#main #statement img:first-of-type {
    float: left;
    margin-right: 15px;
}

#main #statement p:nth-of-type(1)::first-letter {
    font-size: 250%;
}

#main #statement .line:nth-of-type(1), .main #statement .line:nth-of-type(2) { /* center first two lines */
    margin:0 0 0 190px;
    width:60%;
}

#main #statement .line {
    margin: 0;
    width:70%;
}

#main #statement-links {
    display: flex;
    justify-content: space-between;
    align-items:center; /* align items with spacing up and down */
}

#main #statement-links a {
    width: 33.3%;
    padding: 25px 0;
    margin: 5px 0;
    text-align: center;
    transition: linear background-color 0.5s, linear color 0.75s;
}

#main #statement-links a img {
    margin-right: 10px;
    vertical-align: top;
}

/* home and other pages */
.headers, .main_panels {
    display: flex;
    justify-content:space-between;
}

.headers h2:nth-of-type(1), #main .main_left {
    width: 72.5%; 
}

.headers h2:nth-of-type(2), #main .main_right {
    width: 25%;
}

/* curriculum home page */

#curriculum-vision #curriculum-images {
    position: relative;
    height: 600px;
    max-height: 600px;
    width: 100%;
    background-image: url(/Content/graphics/curriculum_vision.png); /* image 500 width x 400 height */
    background-repeat: no-repeat;
    background-position: center 50px;
    margin-top: 100px;
}

#curriculum-vision h5 {
    background-color: var(--ltgreen);
    padding: var(--padding);
    margin-top: 10px;
}

#curriculum-vision .modal_label:nth-of-type(1) {
    position: absolute;
    top: -100px;
    left: 42%;
}

#curriculum-vision .modal_label:nth-of-type(2) {
    position: absolute;
    top: 110px;
    left: 15%;
}

#curriculum-vision .modal_label:nth-of-type(3) {
    position: absolute;
    top: 110px;
    right: 15%;
}

#curriculum-vision .modal_label:nth-of-type(4) {
    position: absolute;
    bottom: -10px;
    left: 27%;
}

#curriculum-vision .modal_label:nth-of-type(5) {
    position: absolute;
    bottom: -10px;
    right: 27%;
}

.modal_window {
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 0;
    height: 0;
    opacity: 0;
    z-index: 99;
}

.modal_checkbox:checked + .modal_window {
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: linear 0.5s opacity;
}

.modal_checkbox:checked + .modal_window > .modal_content {
    display: block;
}

.modal_content {
    width: 60%;
    max-width: 60%;
    background: #fff;
    padding: 2rem;
    border-radius: 1rem;
    position: absolute;
    top: 5%;
    left: 20%;
    box-sizing:border-box;
    display: none;
}

.modal_checkbox {
    display: none;
}

.modal_label {
    text-decoration: underline;
    cursor: pointer;
}

.modal_close-icon {
    cursor: pointer;
    color: #888;
    display: block;
    text-align: center;
}

/* end curriculum home page */

#main .main_right aside h5 {
    color: var(--green);
    margin: 35px 0 2.5px 0;
}

#main .main_right aside h5:first-of-type {
    margin-top:20px;
}

#main .main_right aside .line {
    width: 75%;
    margin: 0;
}

#main .main_right aside h6 {
    margin-top: 10px;
}

#main .main_right aside p {
    font-size: 75%;
    margin-top: 5px;
}

#main .main_right aside img {
    vertical-align: middle;
    margin-right: 5px;
}

.main_right aside table {
    border: 0;
    width: 100%;
    border-collapse: collapse;
}

.main_right aside table tr {
    border-bottom: solid 1px #c0c0c0;
}

.main_right aside table tr td {
    padding: 12.5px 0;
}

.main_right aside table tr td:nth-child(1) {
    width: 10%;
}

.main_right aside table tr td:nth-child(2) {
    width: 70%;
}

.main_right aside table tr td:nth-child(3) {
    width: 20%;
    text-align: center;
}

.main_right aside table .dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    margin: 0 auto;
}

.main_right aside table .dot {
    background-color: #BBB;
}

.main_right aside table tr:nth-of-type(1) .dot {
    background-color: #42AD4C;
}

.main_right aside table span {
    display: block;
    font-size: 75%;
}

.main_right aside table tr td:nth-child(3) span:nth-of-type(1) { /* last column, first element */
    font-size: 70%;
}

.main_right aside table tr td:nth-child(3) span:nth-of-type(2) { /* last column, second element, hover tooltip */
    color: #999900;
    display: block;
    cursor: pointer;
    font-size: 65%;
}

.main_right aside table:nth-of-type(2) a { /* paging table */
    display: block;
    width: 50%;
}

.main_right aside table:nth-of-type(2) a:nth-of-type(1) { /* paging table */
    float: left;
    text-align: left;
}

.main_right aside table:nth-of-type(2) a:nth-of-type(2) { /* paging table */
    float: right;
    text-align: right;
}

/* end aside, table */

.homepage_links_left, .homepage_links_right {
    width: 47.5%;
}

.homepage_links_left p, .homepage_links_right p {
    background-color: var(--green);
    margin: 7.5px 0;
    padding: 5px 0;
}

.homepage_links_left p:first-of-type, .homepage_links_right p:first-of-type {
    margin-top: 0;
}

.homepage_links_left a, .homepage_links_right a {
    color: #fff;
    display: block;
    width: 75%;
    margin: 0 auto;
    text-align: center;
    transition: linear background-color 0.5s, linear color 0.75s;
}

.homepage_links_left a:hover, .homepage_links_right a:hover {
    color: var(--dkgreen);
}

#homepage_awards {
    display: flex;
    justify-content: space-between;
    align-items:center; /* align items with spacing up and down */
}

#homepage_awards a {
    width:auto;
    margin: 0;
}

#homepage_awards a img {
    vertical-align: middle;
}

#homepage_awards a:hover {
    background-color: transparent;
}

/* other pages */

#main .main_right .non_homepage p:nth-of-type(even) {
    font-weight: bold;
}

#main .main_right .non_homepage img {
    display:block;
    margin:10px auto 0 auto;
    width:50%;
    height:auto;
}

#main .main_right .non_homepage img:first-of-type {
    margin-top:0;
}