style.css

html,
body {
	height: 100%;
	/* margin-left: 0; */
	/* margin-right: 0; */
	/* margin-left: 1.2em; */
	/* margin-right: 1.2em; */
	/* margin-top: 0; */	
	/* margin-bottom: 0; */
	/* min-width: 400px; */
	max-width: 1366px; /* 1200px, 1366px, etc. - sets the width above which vertical letterboxing margins are shown to make the site more viewable on wide screens */
 	margin: 0 auto;
}


/*===============box used here to expand empty pages to fill screen to the bottom==============*/

.box {
	display: flex;
        flex-flow: column;
        height: 100%;
}

.box .row.header {
        flex: 0 1 auto;
}

.box .row.content {
        flex: 1 1 auto;
}

.box .row.footer {
        flex: 0 1 auto;
}



.logo-button {
	float: left;
	margin-top: 0px;
	margin-left: 0px;
	/* margin: 0px 0px 50px 15px; (margin: top right bottom left) */
	background-color: transparent;
	border: none;
	/* border-radius: 8px; */
	color: lightgray;
	padding: 0px 0px; /* padding: 15px 0px; */
	/* vertical-align:middle; */
	text-align: top;
	text-decoration: none;
	/* display: inline-block; */
	font-size: 18px;
	font-family:tahoma;
	transition-duration: 0.4s;
 	/* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */ 
}


.header-tabs {
	margin-top: 0.6cm;
	margin-bottom: 0cm;
	text-align: left;
	height: 27px;
}

.header-banner {
	background-image: url("images/banner-background.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	display: table;
	overflow: hidden;
	margin-top: 0cm;
	margin-bottom: 0cm;
	/* text-align: left; */
	/* background-color: transparent; */
	/* height: 240px; */
	width: 100%;
	color: #393939;
	text-decoration: none;
}

.header-banner-short {
	background-image: url("images/banner-background.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	display: table;
	overflow: hidden;
	margin-top: 0cm;
	margin-bottom: 0cm;
	/* text-align: left; */
	/* background-color: transparent; */
	height: 180px;
	width: 100%;
	color: #393939;
	text-decoration: none;
}

.header-menu ul li {
	display: inline-block;
	vertical-align: middle;
}

.header-text {
	margin-top: 38px;
	color: white;
	font-family: Segoe UI, Noto Sans, Helvetica, Arial, sans-serif, garamond, serif;
	text-align: left;
	margin-left: 40px;
	margin-right: 40px;
}



.tab-container {
	color:white;
	font-size: 0px; /* 18px */
	margin-top: 8px; /* distance of tab box from top of page 8-9 */
	font-weight: 300; /* normal (400), bold (700) */
	font-family: Lato,'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	width: auto;  
	height: auto;
  	vertical-align: right;
 	padding-right: 0px; /* distance of tab box from edge of page 8 */
 	text-align: right; /* puts the blocks in container on the right */
}

.tab-container li {
	display: inline-block;
	font-size: 18px;
	/* padding-right: 18px; */
	padding: 0px 18px; /* padding inside tab box - (padding: top+bottom left+right) 14 */
	cursor: pointer;
}


.tab-container li a:hover{
 	color: lightgray !important;
}


.tab-text {
	position: relative;
	top: 50%;
	left: 50%;
	pointer-events: none;
}



.content-text {
	color: black;
	text-align: left;
	margin-top: 0cm;
	margin-bottom: 0cm;
	margin-left: 50px;
	margin-right: 50px;
	font-size: medium;
	font-family: 'Times New Roman';
}


.content-text a:link {
  color: #0000FF;
}

.content-text a:visited,
.content-text a:hover {
  color: #800080;
}

.content-text a:active {
  color: #FF0000;
}


.content-text-no-line-space {
	margin-top: 0cm;
	margin-bottom: 0cm;
}


content-image {
	display:inline-block;
	margin:0px;
	margin-top:0px;
	margin-bottom:15px;
	text-align: center;
	font-size: medium;
	font-family: 'Times New Roman';
}


content-image-spaced {
	display:inline-block;
	margin:15px;
	margin-top:15px;
	margin-bottom:15px;
	text-align: center;
	font-size: medium;
	font-family: 'Times New Roman';
}






.footer {
	background-image: url("images/banner-background.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	text-align: center;
	/* background-color: #6e5d4c;  #c6a786;(tan) */
	/* overflow: hidden; */
	padding-top: 6px;
	padding-bottom: 1px;
	margin-top:auto;	
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	font-weight: 300;
	line-height: 15px;
	color: gray;
}


#footer a {
	color: gray;
}

#footer a:visited {
	color: gray; /* #393939; #669999; */
}

#footer a:hover {
	color: lightgray /* #0000FF; */
}


a:link {
  color: #0000EE;
  text-decoration: none;
}

a:visited {
  color: #551A8B;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  color: #FF0000;
  text-decoration: underline;
}





/*===============used to center anything==============*/

.center {
	text-align: center;
	margin: 0px;
}

.align-right {
	text-align: right;
}

.align-left {
	text-align: left;
}



/*============float images to left or right ============*/

.float-right {
	float: right;
	margin: 0px 0px 15px 15px;

}

.float-left {
	float: left;
	margin: 0px 0px 15px 15px;
}



/*============download button============*/

.download-button {
	background-color: #0b5394; /* #0a95ff (lighter blue) */
	border: none;
	border-radius: 8px;
	color: white;
	padding: 15px 32px;
	vertical-align:middle;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 20px;
	font-family:tahoma;
	transition-duration: 0.4s;
 	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.download-button:hover {
	background-color: #0074cc; /* dark blue */
}

.download-button:active {
  background-color: #0057b1; /* darker blue */
  transition-duration: 0.1s;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.29), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
  /*transform: translateY(2px);*/
}



/*============search button image made using css base64============*/

.search-icon-white::before {
	content: url(data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTUuNTU4IDUxNS41NTgiIHZpZXdCb3g9IjAgMCA1MTUuNTU4IDUxNS41NTgiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTM3OC4zNDQgMzMyLjc4YzI1LjM3LTM0LjY0NSA0MC41NDUtNzcuMiA0MC41NDUtMTIzLjMzMyAwLTExNS40ODQtOTMuOTYxLTIwOS40NDUtMjA5LjQ0NS0yMDkuNDQ1cy0yMDkuNDQ0IDkzLjk2MS0yMDkuNDQ0IDIwOS40NDUgOTMuOTYxIDIwOS40NDUgMjA5LjQ0NSAyMDkuNDQ1YzQ2LjEzMyAwIDg4LjY5Mi0xNS4xNzcgMTIzLjMzNy00MC41NDdsMTM3LjIxMiAxMzcuMjEyIDQ1LjU2NC00NS41NjRjMC0uMDAxLTEzNy4yMTQtMTM3LjIxMy0xMzcuMjE0LTEzNy4yMTN6bS0xNjguODk5IDIxLjY2N2MtNzkuOTU4IDAtMTQ1LTY1LjA0Mi0xNDUtMTQ1czY1LjA0Mi0xNDUgMTQ1LTE0NSAxNDUgNjUuMDQyIDE0NSAxNDUtNjUuMDQzIDE0NS0xNDUgMTQ1eiIvPjwvc3ZnPg==);
	width: 100%;
	height: auto;
}

.search-icon-gray::before {
	content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTE1LjU1OCA1MTUuNTU4IgogICB2aWV3Qm94PSIwIDAgNTE1LjU1OCA1MTUuNTU4IgogICBmaWxsPSIjZmZmIgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmc0IgogICBzb2RpcG9kaTpkb2NuYW1lPSJpbWFnZV9ncmF5LnN2ZyIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMC45Mi40ICg1ZGE2ODljMzEzLCAyMDE5LTAxLTE0KSI+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMTAiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM4IiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgYm9yZGVyb3BhY2l0eT0iMSIKICAgICBvYmplY3R0b2xlcmFuY2U9IjEwIgogICAgIGdyaWR0b2xlcmFuY2U9IjEwIgogICAgIGd1aWRldG9sZXJhbmNlPSIxMCIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMjU2MCIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMzQ2IgogICAgIGlkPSJuYW1lZHZpZXc2IgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBpbmtzY2FwZTp6b29tPSIyLjA0MzgxMTEiCiAgICAgaW5rc2NhcGU6Y3g9IjI1Ny43Nzg5OSIKICAgICBpbmtzY2FwZTpjeT0iMjU3Ljc3ODk5IgogICAgIGlua3NjYXBlOndpbmRvdy14PSItMTEiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9Ii0xMSIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzQiIC8+CiAgPHBhdGgKICAgICBkPSJtMzc4LjM0NCAzMzIuNzhjMjUuMzctMzQuNjQ1IDQwLjU0NS03Ny4yIDQwLjU0NS0xMjMuMzMzIDAtMTE1LjQ4NC05My45NjEtMjA5LjQ0NS0yMDkuNDQ1LTIwOS40NDVzLTIwOS40NDQgOTMuOTYxLTIwOS40NDQgMjA5LjQ0NSA5My45NjEgMjA5LjQ0NSAyMDkuNDQ1IDIwOS40NDVjNDYuMTMzIDAgODguNjkyLTE1LjE3NyAxMjMuMzM3LTQwLjU0N2wxMzcuMjEyIDEzNy4yMTIgNDUuNTY0LTQ1LjU2NGMwLS4wMDEtMTM3LjIxNC0xMzcuMjEzLTEzNy4yMTQtMTM3LjIxM3ptLTE2OC44OTkgMjEuNjY3Yy03OS45NTggMC0xNDUtNjUuMDQyLTE0NS0xNDVzNjUuMDQyLTE0NSAxNDUtMTQ1IDE0NSA2NS4wNDIgMTQ1IDE0NS02NS4wNDMgMTQ1LTE0NSAxNDV6IgogICAgIGlkPSJwYXRoMiIKICAgICBzdHlsZT0iZmlsbDojNjk2OTY5O2ZpbGwtb3BhY2l0eToxIiAvPgo8L3N2Zz4K);
	width: 100%;
	height: auto;
}



/*============expanding search button============*/



.search-wrapper {
	width: 0px;
	height: 40px;
	margin-left: -30px; /* margin between page-links and search button */
	margin-right: 58px; /* margin between search button and page edge */
	background-color: transparent;
	position: relative;
	vertical-align: middle;
	display: inline-block;
}



.search {
	outline: none;
	border: none;
	padding-left: 0px;
	color: black;
	font-size: 16px;
	width: 0px;
	height: 40px;
	/* margin-left: -15px;*/
	background-color: transparent;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease;
	position: absolute;
	right: 0;
	top: 0;
}


.search:focus {
	width: 350px; /* expanded input box size */
	background-color: white;
}


.search input::placeholder {
	color: lightgray;
}


.search:hover input,
.search input:focus,
.search input:valid {
	margin-left: 0px;
	padding-left: 12px; /* 12px space to the left of text inside input box; */
	width: 350px; /* expanded input box size */
	background-color: white;
}

.search button { /* sizes the button and text-box */
	outline: none;
	border: none;
	cursor: pointer;
	width: 40px;
	height: 40px;
	background-color: transparent;
	padding: 12px; /* dictates size of search icon */
	/* border-radius: 0px; */
	-webkit-appearance: none;
}

.search:focus-within button { /* can't combine selectors here because IE11 will whine */
	outline: none;
	border: none;
	width: 40px;
	height: 40px;
	background-color: red;
	padding: 12px; /* dictates size of search icon */
}

.search input:focus + button {
	outline: none;
	border: none;
	width: 40px;
	height: 40px;
	background-color: red;
	padding: 12px; /* dictates size of search icon */
}

.search input:valid + button {
	outline: none;
	border: none;
	width: 40px;
	height: 40px;
	background-color: limegreen;
	padding: 12px; /* dictates size of search icon */
}




/*============grids============*/

/*============grid for 2 columns (maintains two columns by shrinking images)============*/


.grid-container-2 {
	display: grid;
    grid-template-columns: 48.5% 48.5%;
    grid-column-gap: 3%;
	grid-row-gap: 40px;
	background-color: transparent;
	padding: 0px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.grid-container-2 > div {
	/* border: 1px solid black; */
	background-color: transparent;
	min-height: 0;
	min-width: 0; 
}

/*============grid for 3 columns (maintains three columns by shrinking images)============*/


.grid-container-3 {
	display: grid;
	grid-template-columns: 32% 32% 32%;
	grid-column-gap: 2%;
	grid-row-gap: 40px;
	background-color: transparent;
	padding: 0px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.grid-container-3 > div {
	/* border: 1px solid black; */
	background-color: transparent;
	min-height: 0;
	min-width: 0; 
}

/*============grid for 4 columns (maintains four columns by shrinking images)============*/


.grid-container-4 {
	display: grid;
	grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
	grid-column-gap: 2%;
	grid-row-gap: 40px;
	background-color: transparent;
	padding: 0px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.grid-container-4 > div {
	/* border: 1px solid black; */
	background-color: transparent;
	min-height: 0;
	min-width: 0; 
}

/*============grid for 5 columns (maintains five columns by shrinking images)============*/


.grid-container-5 {
	display: grid;
	grid-template-columns: 18% 18% 18% 18% 18%;
	grid-column-gap: 2.5%;
	grid-row-gap: 40px;
	background-color: transparent;
	padding: 0px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.grid-container-5 > div {
	/* border: 1px solid black; */
	background-color: transparent;
	min-height: 0;
	min-width: 0; 
}

/*============grid for 6 columns (maintains six columns by shrinking images)============*/


.grid-container-6 {
	display: grid;
	grid-template-columns: 15% 15% 15% 15% 15% 15%;
	grid-column-gap: 2%;
	grid-row-gap: 40px;
	background-color: transparent;
	padding: 0px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.grid-container-6 > div {
	/* border: 1px solid black; */
	background-color: transparent;
	min-height: 0;
	min-width: 0; 
}

/*============grid for 8 columns (maintains eight columns by shrinking images)============*/


.grid-container-8 {
	display: grid;
	grid-template-columns: 10.75% 10.75% 10.75% 10.75% 10.75% 10.75% 10.75% 10.75%;
	grid-column-gap: 2%;
	grid-row-gap: 40px;
	background-color: transparent;
	padding: 0px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.grid-container-8 > div {
	/* border: 1px solid black; */
	background-color: transparent;
	min-height: 0;
	min-width: 0; 
}




/*============variable grids============*/

/*============variable grid to adjust for different screen sizes 2 to 1 columns============*/


.grid-container-2-1 {
	display: grid;
	grid-template-columns: 100%;
	grid-column-gap: 20px;
	grid-row-gap: 40px;
	background-color: transparent;
	padding: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	text-align: center;
}

.grid-container-2-1 > div {
	/* border: 1px solid black; */
	background-color: transparent;
	min-height: 0;
	min-width: 0; 
}

@media only screen and (min-width: 769px) { /*981px*/
	.grid-container-2-1 {
	grid-template-columns: 58.5% 38.5%;
	grid-column-gap: 3%;
  }
}


/*============variable grid to adjust for different screen sizes 4 to 2 columns============*/


.grid-container-4-2 {
	display: grid;
	grid-template-columns: 48.5% 48.5%;
	grid-column-gap: 3%;
	grid-row-gap: 40px;
	background-color: transparent;
	padding: 0px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.grid-container-4-2 > div {
	/* border: 1px solid black; */
	background-color: transparent;
	min-height: 0;
	min-width: 0; 
}

@media only screen and (min-width: 769px) { /*981px*/
	.grid-container-4-2 {
	grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
	grid-column-gap: 2%;
  }
}


/*============variable grid to adjust for different screen sizes 3 to 2 to 1 columns============*/


.grid-container-3-2-1 {
	display: grid;
	grid-template-columns: 100%;
	grid-column-gap: 0px;
	grid-row-gap: 40px;
	background-color: transparent;
	padding: 0px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.grid-container-3-2-1 > div {
	/* border: 1px solid black; */
	background-color: transparent;
	min-height: 0;
	min-width: 0; 
}

@media only screen and (min-width: 640px) {
	.grid-container-3-2-1 {
	grid-template-columns: 48.5% 48.5%;
	grid-column-gap: 3%;
  }
}

@media only screen and (min-width: 981px) {
	.grid-container-3-2-1 {
	grid-template-columns: 32% 32% 32%;
	grid-column-gap: 2%;
  }
}


/*============variable grid to adjust for different screen sizes 4 to 3 to 2 to 1 columns============*/


.grid-container-4-3-2-1 {
	display: grid;
	grid-template-columns: 100%;
	grid-column-gap: 0px;
	grid-row-gap: 40px;
	background-color: transparent;
	padding: 0px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.grid-container-4-3-2-1 > div {
	/* border: 1px solid black; */
	background-color: transparent;
	min-height: 0;
	min-width: 0; 
}

@media only screen and (min-width: 640px) {
	.grid-container-4-3-2-1 {
	grid-template-columns: 48.5% 48.5%;
	grid-column-gap: 3%;
  }
}

@media only screen and (min-width: 769px) {
	.grid-container-4-3-2-1 {
	grid-template-columns: 32% 32% 32%;
	grid-column-gap: 2%;
  }
}

@media only screen and (min-width: 981px) {
	.grid-container-4-3-2-1 {
	grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
	grid-column-gap: 2%;
  }
}


/*============variable grid to adjust for different screen sizes 8 to 4 to 2 columns============*/


.grid-container-8-4-2 {
	display: grid;
	grid-template-columns: 48.5% 48.5%;
	grid-column-gap: 3%;
	grid-row-gap: 40px;
	background-color: transparent;
	padding: 0px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.grid-container-8-4-2 > div {
	/* border: 1px solid black; */
	background-color: transparent;
	min-height: 0;
	min-width: 0; 
}

@media only screen and (min-width: 640px) {
	.grid-container-8-4-2 {
	grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
	grid-column-gap: 2%;
  }
}

@media only screen and (min-width: 981px) {
	.grid-container-8-4-2 {
	grid-template-columns: 10.75% 10.75% 10.75% 10.75% 10.75% 10.75% 10.75% 10.75%;
	grid-column-gap: 2%;
  }
}