/* set defaults */

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, 'Comic Sans MS', 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;
}

.clear_float {
    clear: both;
}

/* header - footer templates */

#top {
    height: 50px;
    width: 100%;
    color: #FFF;
    background-color: #42AD4C;
}

#top #quote {
    float: left;
    margin: 15px 0 0 25px;
}

#top #translate {
    float: right;
    margin: 15px 25px 0 0;
}

header {
    color: #22522E;
    text-align: center;
    position: relative; /* for logo / character image */
    margin: 0 auto 10px auto; /* center header on screens larger than 1600 */
    max-width: 1600px; /* don't allow absolute elements to stretch out on large resolutions */
}

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 { /* override span settings above */
    margin-top: 7.5px;
    font-size: 125%;
}

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

header #character1 {
    position: absolute;
    top: 100px;
    right: 120px;
}

/* 1366 x 768 - higher than 1366px max-width used */
#wrapper {
    width: 98%;
    margin: 0 auto;
    max-width: 1366px;
    background-color: transparent;
}

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

nav {
    margin: 15px auto 15px auto; /* center nav */
    font-size: 125%;
    text-align: center;
    max-width: 1600px;
}

.dropdown {
    position: relative;
    display: inline-block;
    margin: 0 25px;
}

.dropdown span, .dropdown-content a {
    padding: 10px 0;
    background-color: #9BD96C;
    border-bottom: solid 2px #42AD4C;
    border-radius: 5px;
    transition: background-color 0.7s ease;
    font-weight: bold;
    display: block;
    width: 150px;
    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: #9BD96C;
    border-bottom: solid 2px #42AD4C;
}

.dropdown:nth-child(3) span:hover {
    background-color: #42AD4C;
}

.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;
}

footer {
    width: 100%; /* content out of wrapper */
    min-width: 100%;
    margin-top: 10px;
    padding: 15px 0;
    text-align: center;
    color: #FFF;
    background-color: #22522E;
    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;
}

/* pages */

.main {
    margin: 10px 0;
    font-size: 125%;
    color: #404040; /* light grey */
}

#main_header, #responsive_main_header {
    font-size: 150%;
    text-align: left;
}

#main_header h5, #responsive_main_header h5 {
    color: #FFF;
    background-color: #22522E;
    margin: 7.5px 0;
    padding: 5px 0 5px 10px;
    box-sizing: border-box;
}

#main_header h5:nth-of-type(1) {
    float: left;
    width: 72.5%; /* copy settings from .main_left */
}

#main_header h5:nth-of-type(2) {
    float: right;
    width: 25%; /* copy settings from .main_right */
}

.main .main_left {
    float: left;
    width: 72.5%; /* create space between two elements */
}

#responsive_main_header { /* for tablets / mobiles */
    display: none;
}

.main .main_right {
    float: right;
    width: 25%;
}

/* home page */

#announcement {
    background-color: #9BD96C;
    text-align: center;
}

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

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

.main #statement h2 {
    color: #FFF;
    background-color: #22522E;
    margin: 7.5px 0;
    padding: 5px 0 5px 10px;
    box-sizing: border-box;  
}

.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 {
    width: 70%;
}

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

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

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

#curriculum-vision h5 {
    background-color: #9BD96C;
    padding: 7.5px 0 7.5px 10px;
    margin-top: 10px;
}

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

#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: -25px;
    left: 27%;
}

#curriculum-vision .modal_label:nth-of-type(5) {
    position: absolute;
    bottom: -25px;
    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: 50%;
    max-width: 50%;
    background: #fff;
    padding: 2rem;
    border-radius: 1rem;
    position: absolute;
    top: 5%;
    left: 25%;
    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;
}

.main .main_right aside h5 {
    color: #42AD4C;
    margin: 27.5px 0 2.5px 0;
}

.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) {
    float: left;
    text-align: left;
}

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

#homepage_links, #tab_header {
    margin: 7.5px 0;
}

#homepage_links h5, #tab_header h5 {
    padding: 7.5px 0;
    margin: 12.5px 0 5px 0;
    text-align: center;
    color: #FFF;
    background-color: #22522E;
}

.homepage_links_left {
    width: 47.5%;
    float: left;
}

.homepage_links_right {
    width: 47.5%;
    float: right;
}

.homepage_links_left p, .homepage_links_right p {
    background-color: #42AD4C;
    margin: 7.5px 0;
    padding: 5px 0;
}

.homepage_links_left a, .homepage_links_right a {
    color: #FFF;
    display: block;
    width: 75%;
    margin: 0 auto;
    text-align: center;
}

.homepage_links_left a:hover, .homepage_links_right a:hover {
    color: #22522E;
}

#homepage_awards {
    display:flex;
    justify-content:space-around;
    flex-wrap: nowrap;
    align-items:baseline;
    height:auto;
}

#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 {
    float: left;
    padding-right: 15px;
}