* {padding: 0; margin: 0; border: 0; box-sizing: border-box;}
html, body {margin: 0; padding: 0;}
body {line-height: normal; color: #333; font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #a6c2cb; margin: 0 auto;}
#header {font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; text-shadow:2px 2px 2px #77a1b0; text-align:center;}
#header b {color: #1a5577; line-height: 100%; font-size: 32px;}
#header span {font-weight: italic; font-weight:bold; color: #4186ae; font-size: 24px; display:block;}
#header a {text-decoration: none; }
#page {}
#content {font-size:18px;}
#content i {color:gray;}

a {color: #c4020c; font-weight: bold;}
a:hover {text-decoration: none; color: tomato;}
p {padding-top:20px;}
#content ul {list-style-type: square; margin-top: 5px; margin-bottom: 15px; padding-left: 32px;}
#content ol {margin-top: 5px; margin-bottom: 15px; padding-left: 32px;}
#content li {padding: 5px; font-size: 90%;}
#content ol li {padding: 10px;}


h1, h2, h3 {font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; text-shadow:1px 1px 1px silver; color: maroon; line-height: 100%;}
h1 {padding-top: 10px; margin-bottom: 10px;}
h2 {padding-top: 40px; margin-bottom: 10px;}
h3 {padding-top: 30px; margin-bottom: 10px;}
#schools h2 {border-bottom: 1px solid #77a1b0; padding-bottom: 4px;}
#schools .entry {display: flex; justify-content: flex-start; align-items: center; align-content: space-evenly; gap: 30px; padding:20px; font-style: italic;}
#schools .entry {border-bottom: 1px solid #a6c2cb;}
#schools .name {font-weight:bold; width: 40%;}
#schools .name i {font-weight:normal; size: 90%; display:block;}
#schools .address {width: 40%;}
#schools .website {width: 20%;}
#schools .website a {display:block;}
#events .entry {padding-top:60px; display:block;}
#events .info {margin-top:20px;}
#events li {padding: 0px;}
#events .place h3 {padding-top: 0px; color: maroon; font-weight:bold;}
#events .links a {box-shadow: 3px 3px 3px silver;}
#events .links b {display:block; padding:20px; text-align:center;}
#events a.link-button {color: white; background-color: firebrick; padding:30px; display:block; margin-top: 20px; text-align:center; text-decoration: none; text-shadow:2px 2px 2px maroon;}
#events a.link-button:hover {background-color: tomato;}
#events a.file-button {color: white; background-color: #1a5577; padding:30px; display:block; margin-top: 20px; text-align:center; text-decoration: none; text-shadow:2px 2px 2px #072d3a;}
#events a.file-button:hover {background-color: #4186ae;}
#events .deadline {border: 2px solid silver; padding:15px;}
#events .notice {text-align:center; border: 4px solid firebrick; padding:15px; color: #470104;} 

.clearall {clear:both;}

#newsbox {}
#newsbox a {color: #470104; background-color:firebrick; border: 6px solid maroon; text-decoration: none; display: block; border-radius: 10px; padding:15px; margin-bottom:20px; box-shadow: 1px 1px 1px silver;}
#newsbox a:hover {color: #333; background-color: #eaeaea; border-color: silver; text-decoration: none; display: block;}
#newsbox span {padding-top:0; color: #470104; font-size: 200%; display: block;}
#newsbox a:hover span {color: #333;}


/* Tablet and Phones */
@media (max-width: 960px) {
#menu img {display:none;}
#content {background-color: #d9e8ed; padding: 30px;}
#content img {margin:auto; display:block; padding-top:20px; padding-bottom:20px;}
#header {padding:20px; background-image: url(img/circle.png); background-position: center; background-repeat: no-repeat; min-height: 150px; max-width:520px; margin:auto;}
#header span {color:#d9e8ed;}
h1 {padding-top: 30px;}
h2 {padding-top: 60px;}
h3 {padding-top: 50px;}
 /* Style the navigation menu */
.topnav {overflow: hidden; background-color: #4186ae; position: relative; font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {display: none;}

/* Style navigation menu links */
.topnav a {color: white; padding: 14px 16px; text-decoration: none; font-size: 20px; display: block;
border-bottom: 1px solid #1a5577;}

/* Style the hamburger menu */
.topnav a.icon {background: #4186ae; display: block; position: absolute; right: 0; top: 0; border: 0;}

/* Add a grey background color on mouse-over */
.topnav a:hover {background-color: #1a5577; color: white;}

/* Style the active link (or home/logo) */
.topnav .active, .topnav .active a {background-color: #a6c2cb; color: #1a5577; text-shadow:2px 2px 2px #77a1b0; border: 0;} 
}

@media (max-width: 700px) {
}

@media (min-width: 700px) and (max-width: 960px) {
}

@media (min-width: 700px) {
}

@media (max-width: 700px) {
#schools .entry, #events .entry {flex-wrap: wrap;}
#schools .name, #schools .address, #schools .website, #events .date, #events .info, #events .place, #events .links {width: 100%;}
}

@media (min-width: 400px) and (max-width: 600px) {
}

@media (min-width: 600px) and (max-width: 960px) {
}

/* Desktop and up */
@media (min-width: 960px) {
body {background-image: url(img/bg2.png);}
#footer .top a, .topnav .active, .topnav a.icon {display:none;}
#page {padding-top:0; margin: 0 auto; width: 956px; background-color: #d9e8ed; border-left: 2px solid #77a1b0; border-right: 2px solid #77a1b0; padding: 20px; padding-bottom: 80px;}
#menu {width:200px; float: left;}
#content {width: 680px; float:right;}
#footer {}
#header {height: 145px; background: #d9e8ed url(img/header3.png) no-repeat center center; border-bottom: 2px solid #77a1b0; margin-bottom: 20px; padding-right: 230px; padding-left: 230px; display: flex; align-items:center; justify-content:center;}
#content img {float: right; margin-left: 20px; margin-bottom: 20px; margin-top: 20px; margin-right: 20px;}
.topnav a {color:white; padding: 16px; background-color:#093751; text-decoration: none; border-radius: 0px 0px 0px 10px; margin-top:5px; text-shadow:2px 2px 2px #072d3a; box-shadow: 1px 1px 1px silver; border-right: 12px solid #1a5577; display: block; text-align:right;}
.topnav a:hover {background-color:#1a5577;}
#menu img {margin:auto; margin-top: 40px; display:block;}
#newsbox {margin-right:20px;}
}