@charset "utf-8";

/* Variables for light & dark modes. */

:root {
	--kcc-content-bg-color-rgb: 246, 252, 215;
	--kcc-content-bg-color: rgb(var(--kcc-content-bg-color-rgb));
	--kcc-content-fg-color-rgb: 51, 51, 51;
	--kcc-content-fg-color: rgb(var(--kcc-content-fg-color-rgb));
	--kcc-content-shadow-color-rgb: 204, 204, 204;
	--kcc-content-shadow-color: rgb(var(--kcc-content-shadow-color-rgb));

	--kcc-base-bg-color-rgb: 255, 255, 255;
	--kcc-base-bg-color: rgb(var(--kcc-base-bg-color-rgb));
	--kcc-base-bg-image: url("/images/bg.jpg");

	--kcc-promo-bg-color-rgb: 237, 247, 160;
	--kcc-promo-bg-color: rgb(var(--kcc-promo-bg-color-rgb));

	--kcc-navbar-bg-color-rgb: 157, 210, 130;
	--kcc-navbar-bg-color: rgb(var(--kcc-navbar-bg-color-rgb));
	--kcc-navbar-fg-color-rgb: 98, 105, 56;
	--kcc-navbar-fg-color: rgb(var(--kcc-navbar-fg-color-rgb));
	--kcc-navbar-bg-hover-color-rgb: 213, 236, 164;
	--kcc-navbar-bg-hover-color: rgb(var(--kcc-navbar-bg-hover-color-rgb));
	--kcc-navbar-shadow-color-rgb: 187, 187, 187;
	--kcc-navbar-shadow-color: rgb(var(--kcc-navbar-shadow-color-rgb));

	--kcc-header-fg-color-rgb: 81, 94, 6;
	--kcc-header-fg-color: rgb(var(--kcc-header-fg-color-rgb));

	--kcc-link-fg-color-rgb: 140, 32, 11;
	--kcc-link-fg-color: rgb(var(--kcc-link-fg-color-rgb));
	--kcc-link-hover-color-rgb: 178, 59, 36;
	--kcc-link-hover-color: rgb(var(--kcc-link-hover-color-rgb));
}

@media (prefers-color-scheme: dark) {
:root {
	--kcc-content-bg-color-rgb: 32, 33, 36;
	--kcc-content-fg-color-rgb: 246, 252, 215;
	--kcc-content-shadow-color-rgb: 4, 4, 4;
	--kcc-base-bg-color-rgb: 16, 16, 16;
	--kcc-base-bg-image: url("/images/bg-dark.png");
	--kcc-promo-bg-color-rgb: 48, 48, 48;
	--kcc-navbar-bg-color-rgb: 82, 142, 51;
	--kcc-navbar-fg-color-rgb: 0, 0, 0;
	--kcc-navbar-shadow-color-rgb: 47, 54, 13;
	--kcc-header-fg-color-rgb: 133, 155, 6;
	--kcc-link-fg-color-rgb: 171, 128, 194;
	--kcc-link-hover-color-rgb: 171, 148, 204;
}
}

@supports (background-image: url("/images/bg.webp")) {
:root {
	--kcc-base-bg-image: url("/images/bg.webp");
}
@media (prefers-color-scheme: dark) {
:root {
	--kcc-base-bg-image: url("/images/bg-dark.webp");
}
}
}

/* =General
-----------------------------------------------------------------------------*/

/* Remove padding and margin */
* {
	margin: 0;
	padding: 0;
}

/* Remove border around linked images */
img {
	border: 0;
}

p {
	margin: 0 0 0.5em 0;
	line-height: 1.25em;
	clear: both;
}

td {
	padding: 2px 4px;
}

ul, li {
	color: var(--kcc-content-fg-color);
	margin: 0;
	padding: 0;
	list-style-type: none;
	list-style-image: none;
}

a:link {
	text-decoration: underline;
	color: var(--kcc-link-fg-color);
}

a:active {
	text-decoration: underline;
	color: var(--kcc-link-fg-color);
}
a:visited {
	text-decoration: underline;
	color: var(--kcc-link-fg-color);
}
a:hover {
	text-decoration: none;
	color: var(--kcc-link-hover-color);
}

h1 {
	margin: 0;
	position: absolute;
	width: 100%;
	background-image: url(/images/spacer.gif);
	background-repeat: no-repeat;
}

h1 a {
	display: block;
	background-image: url(/images/spacer.gif);
	background-repeat: no-repeat;
}

h2 {
	color: var(--kcc-header-fg-color);
	font-size: 16px;
	font-weight: bold;
	margin: 0 0 0.5em 0;
}

h3 {
	font-weight: bold;
	font-size: 12px;
	color: var(--kcc-content-fg-color);
	margin-top: 1em;
	margin-bottom: 1em;
}

/* =Typography
-----------------------------------------------------------------------------*/

body {
	margin: 0 auto;
	color: var(--kcc-content-fg-color);
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	background: var(--kcc-base-bg-color) var(--kcc-base-bg-image) no-repeat left bottom;
}


/* =Container
-----------------------------------------------------------------------------*/

#container {
	box-shadow: 4px 8px 8px var(--kcc-content-shadow-color);
	background-color: var(--kcc-base-bg-color);
	margin: 0 auto;
	text-align: left;
	width: 771px;
	position: relative;
	top: 0px;
	left: 0px;
}

/* =Masthead
-----------------------------------------------------------------------------*/

#masthead {
	position: relative;
	height: 86px;
	background-color: #EDEDDC;
	overflow-x: clip;
	overflow-y: clip;
	padding: 0;
	margin: 0;
	white-space: nowrap;
}

#masthead #bug {
	background-image: url(/images/pagehead_bug.gif);
	background-position: 20px;
	background-repeat: no-repeat;
	display: inline-block;
	height: 86px;
	width: 190px;
}

#masthead #text {
	background-image: url(/images/pagehead_text.gif);
	background-repeat: no-repeat;
	display: inline-block;
	height: 86px;
	width: 400px;
}

#masthead a {
	text-decoration: none;
}


/* =Navigation
-----------------------------------------------------------------------------*/

#nav {
	background-color: var(--kcc-navbar-bg-color);
	padding-bottom: 0.3em;
	padding-left: 3%;
	padding-top: 0.3em;
}

#nav a {
	color: var(--kcc-navbar-fg-color);
	font-weight: bold;
	padding: 1em 0.5em 1em 0.5em;
	margin-left: 0.5em;
	text-decoration: none;
	white-space: nowrap;
}

#nav a:hover, #nav a.this {
	background-color: var(--kcc-navbar-bg-hover-color);
	text-decoration: none;
}

#nav img,
#nav svg {
	fill: var(--kcc-navbar-fg-color);
	vertical-align: middle;
}

#nav #search {
	border: 0px;
	display: inline;
	padding-left: 10%;
}

#nav #search input[type="search"] {
	background-image: url("/images/search.svg");
	background-position-x: right;
	background-position-y: center;
	background-repeat: no-repeat;
	border: 1px;
	padding-left: 3px;
	padding-right: 15px;
}

.fb-page {
	height: 130px;
}

.mobile_show {
	display: none;
}

/* =Content
-----------------------------------------------------------------------------*/

#content {
	background-color: var(--kcc-content-bg-color);
	position: relative;
	width: 100%;
}

#homebanner {
	background-color: var(--kcc-content-bg-color);
	position: relative;
}

#main {
	background-color: var(--kcc-content-bg-color);
	position: relative;
	text-align: left;
	width: 90%;
	margin: 30px 30px;
}

#home_main_left {
	background-color: var(--kcc-content-bg-color);
	width: 56%;
	float: left;
}

#home_main_right {
	background-color: var(--kcc-content-bg-color);
	width: 38%;
	float: right;
	padding-bottom: 1em;
}

#main_left {
	background-color: var(--kcc-content-bg-color);
	width: 28%;
	float: left;
}

#main_right {
	background-color: var(--kcc-content-bg-color);
	width: 72%;
	float: right;
}

#main_right ul li {
	list-style-type: "►";
	padding: 4px 0 0 0;
	margin: 0 0 4px 20px;
	text-indent: 0px;
}

#main_tbleft {
	background-color: var(--kcc-content-bg-color);
	float: left;
	padding-bottom: 30px;
	width: 65%;
}

#main_tbright {
	background-color: var(--kcc-content-bg-color);
	float: right;
	padding-bottom: 30px;
	width: 35%;
}

#greenbreak {
	background-color: var(--kcc-navbar-bg-color);
	position: relative;
	width: 100%;
	height: 8px;
	clear: both;
}

#yellowbreak {
	background-color: var(--kcc-promo-bg-color);
	position: relative;
	width: 100%;
	height: 18px;
	clear: both;
}

#ApplyHome {
	background-color: var(--kcc-content-bg-color);
	text-align: left;
	position: relative;
	padding: 10px 10px 20px 30px;
}

#homepromo {
	background-color: var(--kcc-promo-bg-color);
	text-align: left;
	position: relative;
	padding: 30px 30px;
}

#homepromo_left {
	background-color: var(--kcc-promo-bg-color);
	width: 38%;
	float: left;
}

.homebox {
	border-color: var(--kcc-header-fg-color);
	border-radius: 0.8em;
	border-style: solid;
	border-width: 1px;
	box-shadow: 0.5em 0.5em 0.5em var(--kcc-navbar-shadow-color);
	padding: 6px;
}
.homebox h2 {
	color: var(--kcc-header-fg-color);
	width: 120px;
	border-bottom: 1px solid var(--kcc-header-fg-color);
	margin-top: 0;
	margin-bottom: 0.5em;
}
.homebox h4 {
	margin-bottom: 0.5em;
}
.homebox p {
	margin-top: 0.5em;
	margin-bottom: 0;
}
.homebox ul {
	margin-left: 0.5em;
	list-style-type: disc;
}
.homebox li {
	margin-left: 0.5em;
	list-style-type: disc;
}

#navbox {
	text-align: left;
	border-color: var(--kcc-header-fg-color);
	border-radius: 0.8em;
	border-style: solid;
	border-width: 1px;
	box-shadow: 0.5em 0.5em 0.5em var(--kcc-navbar-shadow-color);
	padding-bottom: 1em;
	padding-top: 1em;
	width: 80%;
}

#navbox ul {
	margin: 0;
	padding-left: 2em;
	list-style-type: none;
}

#navbox ul a {
	color: var(--kcc-link-hover-color);
	display: block;
	font-weight: bold;
	height: 2em;
	line-height: 2em;
	margin: 0;
	text-decoration: none;
	white-space: nowrap;
}

#navbox a:hover, #navbox .this a {
	color: var(--kcc-link-fg-color);
}

#navbox li.this, #navbox li:hover {
	list-style-type: "►";
}

.center {
	text-align: center;
}

/* =Footer
-----------------------------------------------------------------------------*/

#footer {
	background-color: var(--kcc-navbar-bg-color);
	width: 100%;
	color: var(--kcc-base-bg-color);
	text-align: center;
	font-size: 12px;
	height: 23px;
	padding-top: 6px;
	clear: both;
	box-shadow: 4px 8px 8px var(--kcc-content-shadow-color);
}

#footer a {
	color: var(--kcc-navbar-fg-color);
}

#bottomshadow {
	width: 100%;
	height: 8px;
}

/* =Mobile (i.e. phone) overrides
-----------------------------------------------------------------------------*/

/* This is ~768px with 16pt font.  */
@media only screen and (max-width: 50em) {
#container {
	width: 100%;
}

/* Make it easier for people to click the navbar on a touchscreen. */
#nav {
	font-size: large;
	line-height: 2em;
	padding-left: 1%;
}

#nav a {
	margin-left: 0;
}

#nav #search {
	padding-left: 0;
}

#nav #search input[type="search"] {
	font-size: large;
	width: 25%;
}

h3 {
	font-size: 14px;
}

body {
	font-size: 14px;
}

img.small-fill {
	display: block;
	float: unset;
	padding: 0.5em;
}

.fb-page {
	height: inherit;
}

.mobile_hide {
	display: none;
}

.mobile_show {
	display: inherit;
}

#yellowbreak {
	height: 1px;
}

#bottomshadow {
	display: none;
}

#masthead {
	height: 82px;
	position: relative;
	width: 100%;
}

#masthead #bug {
	background-position: 1px;
	height: 82px;
	width: 111px;
}

#masthead #text {
	height: 82px;
}

#homebanner {
	overflow-x: hidden;
}

#ApplyHome {
	padding: 1em 1em;
}

#homepromo {
	padding: 1em 1em;
}

#main {
	margin: 1em;
	width: 95%;
}

#main_left {
	float: none;
	padding-bottom: 2em;
	width: 100%;
}

#main_right {
	float: none;
	width: 100%;
}

#main_tbleft {
	float: none;
	width: 100%;
}

#main_tbright {
	float: none;
}

#home_main_left {
	float: none;
	width: 100%;
}

#home_main_right {
	float: none;
	width: 90%;
}
}

/* This is ~480px with 16pt font.  */
@media only screen and (max-width: 30em) {
#main {
	margin: 0.5em;
}

#nav {
	font-size: 1.1em;
}

#nav a {
	padding: 1em 0.2em 1em 0.2em;
}

#masthead {
	height: 41px;
	position: relative;
	width: 100%;
}

#masthead #bug {
	background-position: 0;
	background-size: contain;
	height: 41px;
	width: 60px;
}

#masthead #text {
	background-size: contain;
	height: 41px;
}

#navbox {
	padding-bottom: 0.5em;
	padding-top: 0.5em;
}

#main_left {
	padding-bottom: 1.5em;
}

#home_main_right {
	width: 100%;
}
}