/* 
KOS 2020 Cascading Style Sheet

This new css was created in 2020 with the  development of the 2020 Website update

Author: Steve Brown
Last Updated: December 2020
*/

html {
	font-family: Sora, Helvetica, San-serif;
}

body {
	background-color: #f4f5ef; /* #FDF5E6; ddddbb */
	font-size: 100%;
}

* {
	box-sizing: border-box;
} 

/* BEGIN: Code for RWD - 12-column grid */
.row::after {
	content: "";
	clear: both;
	display: table;
}

[class*="col-"] {
	float: left;
	padding: 25px 10px 10px 10px;
}

/* For mobile phones: */
[class*="col-"] {
	width: 100%;
}
h1.announce {
	font-size: 1.5em;
	text-align: left;
	color: white;
	letter-spacing: 1px;
}
h3.h3announce {
	font-size: 1.125em;
	color: white;
	letter-spacing: 1px;
}

img.announce {
	max-width: 70px;
}

.selectorform {
	font-size: .8em;
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-align: right;
}

.selectorinput {
	font-size: .8em;
}

a.anchor {
    display: block;
    position: relative;
    top: -75px;
    visibility: hidden;
}

div.headertext {
	float: left;
	width: 75%;
	padding-top: 0px;
	padding-bottom: 0;
	padding-left: 20px;
	margin-left: 20px;
}

div.headertext p {
	color: white;
	font-family: Times, serif;
	font-size: 4.5vw;
	text-shadow: 4px 2px #505050;
	margin: 25px 0px 0px 0px;
}


@media only screen and (min-width: 600px) {
	/* For tablets: */
	.col-s-1 {width: 8.33%;}
	.col-s-2 {width: 16.66%;}
	.col-s-3 {width: 25%;}
	.col-s-4 {width: 33.33%;}
	.col-s-5 {width: 41.66%;}
	.col-s-6 {width: 50%;}
	.col-s-7 {width: 58.33%;}
	.col-s-8 {width: 66.66%;}
	.col-s-9 {width: 75%;}
	.col-s-10 {width: 83.33%;}
	.col-s-11 {width: 91.66%;}
	.col-s-12 {width: 100%;}
	h1.announce {
		font-size: 2em;
		text-align: left;
		color: white;
		letter-spacing: 1.5px;
	}
	h3.h3announce {
		font-size: 1.25em;
		color: white;
		letter-spacing: 1.5px;
	}
	img.announce {
		max-width: 85px;
	}
	.selectorform {
		font-size: .9em;
		text-decoration-line: underline;
		text-decoration-style: dotted;
		text-align: right;
	}
	.selectorinput {
		font-size: .9em;
	}
}

@media only screen and (min-width: 768px) {
	/* For desktop: */
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}
	h1.announce {
		font-size: 2.5em;
		text-align: left;
		color: white;
		letter-spacing: 2px;
	}
	h3.h3announce {
		font-size: 1.55em;
		color: white;
		letter-spacing: 2px;
	}
	img.announce {
		max-width: 100px;
	}
	.selectorform {
		font-size: 1em;
		text-decoration-line: underline;
		text-decoration-style: dotted;
		text-align: right;
	}
	.selectorinput {
		font-size: 1em;
	}
}

/* END: Code for RWD - 12-column grid */

/* BEGIN: Code for tooltip popup */
/* Tooltip container */
.tooltip {
	position: relative;
	display: inline-block;
	/* border-bottom: 1px dotted white; Display dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: black;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
	
	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
	top: -5px;
	right: 105%;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
	visibility: visible;
}
/* End: Code for tooltip popup */

div.logo {
	float: left;
	width: 10%;
	padding: 10;
	margin-right: 10px;
}

div.tiletype1 {
	display: block;
	max-width: 100px;
	padding: 0;
	height: auto;
	margin: 5px;
	float: left;
	font-family: Sora, Helvetica, sans-serif;
	text-align: justify;
}

div.quoted {
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
	padding-right: 15px;
}

img.tiletypebutton {
	width: 100%
}

img.tiletypebutton:hover {
	opacity: 0.8;
}


p {
	font-family: Sora, Helvetica, sans-serif;
	font-size: 1.0em; /* Assumes default = 16px in most browsers */
}

h1 {
	color: black;
	font-family: Artifika, serif;
	/* Note on h1 font size. It is normaly set to 2em by the browser, but Chrome sets the h1 element's 
	'default' size to 1.5em when used within the article, aside, nav and section elements.
	The following font-size setting makes it uniform size throughout. Normal H1 default is 2em */
	font-size: 2.5em;
}

h2 {
	color: maroon;
	font-family: Artifika, serif;
	font-size: 2em;
}

h3 {
	color: maroon;
	font-family: Artifika, serif;
	font-size: 1.5em;
}

h4 {
	/* 
	color: maroon;
	*/
	font-family: Artifika, serif;
	font-size: 1.25em;
}

h5 {
	/* 
	color: maroon;
	*/
	font-family: Artifika, serif;
	font-size: 1.125em;
}

a {
	font-family: Sora, Helvetica, sans-serif;
	font-size: 1.0em;
	color: darkgreen;
} 

a.buttonstyle {
	display: block;
	margin: auto;
	color: white;
	background-color: #8d9966;
	border-style: solid;
	border-width: 2px;
	border-color: darkgreen;
	border-radius: 10px;
	width: 50%;
	padding: 20px;
	text-align: center;
	text-decoration: none;
	font-size: 1.125em;
	
}

article {
	padding-top: 0;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 15px;
	/* 
	border-style: solid;
	border-radius: 10px;
	border-width: 1px;
	border-color: darkgreen;
	margin-left: 5px;
	margin-top:	15px;
	margin-right: 30px;
	margin-bottom: 5px;
	background-color: rgba(140, 153, 102, 0.2); /* medium olive shade */
	*/
}

article p {
	line-height: 1.5;
} 

article h1 {
	margin-top: 10px;
	text-align: center;
	/* background-color: gray; */
}

aside {
	/* 
	margin-top:	15px;
	margin-left: 30px;
	margin-right: 30px;
	margin-bottom: 5px; 
	*/
	border-style: solid;
	border-radius: 10px;
	border-width: 1px;
	border-color: darkgreen;
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 15px;
	background-color: rgba(140, 153, 102, 0.2); /* medium olive shade */
}

aside h3 {
	margin-top: 10px;
	margin-bottom: 10px;
	/* background-color: gray; */
}

aside p {
	font-size: 0.95em;
}

aside li {
	font-size: 0.95em;
	margin-left: -20px;
	padding-bottom: 5px;
	list-style-type: square;

}

aside img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 5px;
	width: 90%;
	max-width: 100%;
	border-style: solid;
	border-color: darkgreen;
	border-width: 1px;
}

nav {
	/* margin-top:	15px;
	margin-left: 30px;
	margin-right: 30px;
	margin-bottom: 5px; */
	border-style: solid;
	border-radius: 10px;
	border-width: 1px;
	border-color: darkgreen;
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 20px;
	background-color: rgba(140, 153, 102, 0.2); /* medium olive shade */
}

nav p {
	font-size: 0.9em;
}

nav h3 {
	margin-top: 10px;
	margin-bottom: 10px;
	/* background-color: gray; */
}

footer {
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 15px;
	text-align: center;
	/* width: 60%; */
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
	border-color: darkgreen;
	margin-top: 30px;
	padding: 4px;
	font-family: Sora, Helvetica, sans-serif;
	font-size: 0.875em; /* 14px/16=0.875em. Assumes default = 16px. Old value was 10pt */
	color: black;
	background-color: rgba(140, 153, 102, 0.2);
}

figure {
	border-style: solid;
	border-color: darkgreen;
	margin: 0px;
	padding: 5px 5px 0px 5px;
}

figcaption {
	text-align: center;
	padding: 2px
}

div.innerbox { /* For use with inset documents */
	margin: inherit;
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
	border-color: darkgreen;
	margin-top: 30px;
	padding: 4px;
}

.menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0px;
/*
list-style-position: inside;
*/
}

.menu li {
	display: block;
	padding: 8px;
	margin-bottom: 7px;
	background-color: rgb(141, 153, 102);
	/*
	color: #ffffff;
	font-family: Sora, Helvetica, sans-serif;
	font-size: 0.9em;
	*/
}

.menu li:hover {
	background-color: rgb(113, 122, 82);
}

.menu li.active {
	background-color: rgb(70, 77, 51);
}

.menu a {
	color: #ffffff;
	text-decoration: none;
	font-family: Sora, Helvetica, sans-serif;
	font-size: 1.0em;
}

div.header {
	background-color: rgb(140, 153, 102); /* #999966; #e68a00; */
	padding: 10px 20px;
	/* 
	color: white;
	text-align: center;
	background-image: url("../images/backgroundbird8bsmall50x.png");
	text-shadow: 2px 0px #505050;
	*/
}

ul.mainlist {
	line-height: 1.25;
}

ul.mainlist li {
	padding-bottom: 0.5em;
	text-align: left;
}

ul.preslist {
	padding: 0;
}

ul.preslist li {
	list-style-type: none;
	margin-left: 0px;
	padding-left: 25px;
	padding-right: 15px;
	text-indent: -15px;
	/* 
 	*/
}

ul.boardlist li {
	list-style-type: none;
	padding-bottom: 0.5em;
}

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

img.enlarge:hover {
	cursor: zoom-in;
	opacity: 0.5;
	
}

.parallax {
  /* The image used */
  background-image: url("../images/seow_sgraham.jpg");

  /* Set a specific height */
  min-height: 100px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
}

/* Older css code below this line 
- After testing, okay to remove the code below */ 




/* 
.sora {
	font-family: Sora, Helvetica, sans-serif;
}

.artifika {
	font-family: Artifika, serif;
}

.fsize16 {
	font-size: 16pt;
}

.roboto {
	font-family: Roboto, sans-serif;
}

.ibmplexserif {
	font-family: "IBM Plex Serif", serif;
}

.notoserif {
	font-family: "Noto Serif", serif;
}

.karma {
	font-family: Karma, serif;
}

.karmabold {
	font-family: "Karma Bold", serif;
}

.mukta {
	font-family: 'Mukta', sans-serif;
}

.zillaslab {
	font-family: "Zilla Slab", serif;
}

.averia {
	font-family: 'Averia Gruesa Libre', cursive;
}

.cormorantgaramond {
	font-family: 'Cormorant Garamond', serif;
}

.galdeano {
	font-family: 'Galdeano', sans-serif;
}

.gfsneohellenic {
	font-family: 'GFS Neohellenic', sans-serif;
} */

.italfont {
	font-style: italic;
}

/* 

 */

.tiles {
	font-family: verdana, sans-serif;
	font-size: 12pt;
	color: darkgreen;
	text-align: center;
}

.bodytext {
	font-family: verdana, sans-serif;
	font-size: 14pt;
}

.linktext1 {
	font-size: 12pt;
	margin-left: 35px;
}

.citetext {
	font-size: 12pt;
	font-style: italic;
}

/*
table {
	width: 100%;
	border-collapse: collapse;
	font-family: Arial, Helvetica, San-serif;
	font-size: 12pt;
	border: 1px solid green;
}

th {
	padding: 10px;
	border: 1px solid green;
	text-align: left;
	background-color: lightgray;
}

td {
	border: 1px solid green;
	padding: 10px;
}
*/

table {
	width: 100%;
	border: 1px solid green;
	border-collapse: collapse;
	font-family: Arial, Helvetica, San-serif;
	font-size: 1.0em;
}

th {
	Height: 50px;
	border: 1px solid green;
	background-color: lightgray;
}

th.sortable:hover {
	color: Gainsboro;
	background-color: gray;
	cursor: pointer; 
}


td {
	border: 1px solid green;
	padding: 10px;
}

div.header2 {
	padding-left: 180px;
	padding-top: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
	color: darkgreen;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 30pt;
	font-weight: bold;
	text-align: center;
	/* text-shadow: 2px 0px #505050; */
}

div.flex1 {
	display: flex;
	margin: 0px;
	padding: 0px;
	Width: 100%
}

div.itemcontainer {
/*	color: #804000; */
	margin-left: 30px;
	margin-right: 30px;
	margin-top:	15px;
	margin-bottom: 5px;
	border-radius: 5px;
	border-style: solid;
	border-width: 2px;
	bordor-color: maroon;
	padding-top: 5px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 20px;
	background-image: url("../images/bkgrndolive.png");
}

div.itemcontinline {
/*	color: #804000; */
	margin-left: 30px;
	margin-right: 0px;
	margin-top:	15px;
	margin-bottom: 5px;
	border-radius: 5px;
	padding-top: 5px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 20px;
	background-image: url("../images/bkgrndolive.png");
}

div.teamblock {
	margin: auto;
	float: center;
	text-align: center;
	max-width: 600px;
	border: 1px solid green;
	border-radius: 5px;
	padding: 10px;
	background-image: url("../images/bkgrndolive.png");
}

div.linkblock {
	margin-left: 30px;
	margin-right: 30px;
	margin-top:	15px;
	margin-bottom: 25px;
	padding-left: 30px;
}

div.linkblock a {
	font-size: 12pt;
	color: darkgreen;
}

div.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	width: 50%;
}

div.cpyrght {
	margin: auto;
	text-align: center;
	width: 60%;
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
	border-color: darkgreen;
	margin-top: 30px;
	padding: 4px;
	font-family: Sora, Helvetica, sans-serif;
	font-size: 10pt;
	color: darkgreen;
}

/*
div.cpyrght p {
	font-family: Sora, Helvetica, sans-serif;
	font-size: 10pt;
	color: darkgreen;
}
*/
	
button.launchmodal {
	background-color: rgba(140, 153, 102, 0.2); /* medium olive shade */
	border-style: solid;
	border-width: 2px;
	border-color: #804000;
	border-radius: 10px;
	color: #334d00;
	padding: 15px 10px;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	/* width: 220px;announce */
	
}

button.announce {
	background-color: #4d4d4d;
	color: white;
	border-radius: 10px;
	width: 100%;
	margin-top: 4px;
}

button.cbcsched {
	background-color: #8d9966;
	color: white;
	border-radius: 10px;
	width: 100%;
	margin-top: 10px;
	padding: 10px;
	font-size: 1.125em;
}

button.cbcsched:hover {
	background-color: #717a52;	
}

.column {
	float: left;
	padding: 10px;
}

.column3 {
	columns: 150px 3;
	column-gap: 40px;
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

.content {
	width: 63%;
}


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

img.cntred {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.fltcont {
  overflow: hidden;
  background-color: #333;
}

/* Flexbox */
.flex-container {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	background-color: rgba(0,0,0,0.1);
}

.flex-container div {
	background-color: #f1f1f1;
	width: 210px;
	height: 230px;
	margin: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-top: 5px;
}

.flex-containerwide {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	background-color: rgba(0,0,0,0.1);
}

.flex-containerwide div {
	background-color: #f1f1f1;
	width: 300px;
	height: 360px;
	margin: 10px;
	padding: 10px;
}

/* Begin - Modal settings */
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 75px; /* Location of the box */
  padding-bottom: 75px; /* Location of the box */
  left: 0;
  top: 0;
  height: 100%; /* Full height */
  width: 100%; /* Full width */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
	background-color: #404040;
	color: white;
	margin: auto;
	padding: 20px;
	border: 1px solid #888;
	width: 90%;
} 

/* Modal Content for image enlargement */
.modal-content-img {
	display: block;
	margin: auto;
	max-width: 100%;
/*	width: 80%;
*/
}

/* Caption of Modal Image */
#caption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	/*
	height: 150px;
	*/
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  margin-right: 0px;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* The Close Image Button */
.close-img {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close-img:hover,
.close-img:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* Begin - Topnav settings */
.topnav {
/*   overflow: hidden; */
  background-color: #333;
  min-height: 44px;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 12px 14px;
  text-decoration: none;
  font-size: 16px;
  font: verdana, sans-serif;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown Button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 12px 14px;
  background-color: inherit;
  font-family: verdana, sans-serif;
  margin: 0; /* For vertical align on mobile screens */
}

.topnav a:hover, .dropdown:hover .dropbtn {
	background-color: #ddd;
	color: black;
}

.topnav a.active, .dropdown.active .dropbtn {
  background-color: gray; 
  color: white;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

/* Set background color for dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

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

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  padding-right
}

.sticky + .content {
  padding-top: 60px;
}

div.sticky2 {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: none;
  padding: 0px;
}

.sticky2 + .content2 {
/*  padding-top: 60px; */
}

/* End - Topnav settings */