@charset "utf-8";

:root {

 /* Core blues */
  --kyg-navy: #020924;
  --kyg-navy-soft: #0b1220;
  --kyg-navy-tint: #041431;
  --kyg-med-blue: #506a99;
  --kyg-navy-warm: #2e384d;
  

  /* Golds */
  --kyg-accent: #c2923a;
  --kyg-accent-deep: #a87323;

  /* Neutrals */
  --kyg-cream: #f7f3eb;
  --kyg-cream-light: #fbf8f2;
  --kyg-cream-warm: #f0e4d2;
  --kyg-paper: #fdfaf5;
  --kyg-ink: #111111;
  --kyg-muted: #555555;
  --kyg-slate: #eef2f6;

  /* Header + footer colors */
  --kyg-header-top: var(--kyg-navy-warm);
  --kyg-footer: var(--kyg-navy-warm);
  --kyg-footer-text: var(--kyg-cream-light);

  --color-surface:   #ffffff;  

  /* ---------------------------------------------------------------------- */
  /* Fonts */
  --font-sans: "Segoe UI", sans-serif;
  --font-serif: "Georgia", "Times New Roman", serif;


	--accent: var(--kyg-navy-warm);
	--black: #000000;
	--stone: var(--kyg-cream);
}

body {
	font-family: var(--font-serif);
	margin: 0;
	padding: 0;
	background-color: var(--accent); 
  line-height: 130%;
	color: var(--black);
}
/*============indicates no border around any image =========*/
body img {
	border: 0px;
	text-decoration: none;
	border-radius: 8px;
}
/*====== margins auto center the container on the page ======*/ 
#container {
	margin: auto;
	padding: 30px;
	background-color: var(--stone);
	width: 80%;
	max-width: 1300px;
}
/*=========== styles for top banner ==================*/
#banner {
	background-position: center;
	padding: 10px;
	background-color: var(--stone);
	height: 195px;
	background-repeat: no-repeat;
	color: var(--black);
}

/*============= styles for main content area=================*/
#content {
	width: 100%;
	padding: 15px;
	text-align: left;
	vertical-align: top;
}

/*===========content area list items==============*/
#content ul li {
	margin: 2px;
	padding: 2px;
	list-style: none none;
}
#content li li {
	padding: 2px 0;
}

/*============== styles for top menu =================*/

.mattblacktabs {
	width: 100%;
	overflow: hidden;
font-weight: bolder;
	border-bottom: 1px solid var(--accent); /*bottom horizontal line that runs beneath tabs*/	
	background-color: var(--accent); 
}
.mattblacktabs ul {
	margin: 0;
	padding: 0;
	padding-left: 10px; /*offset of tabs relative to browser left edge*/;
	font: bolder .9em Verdana;
	list-style-type: none;
}
.mattblacktabs li {
	display: inline;
	margin: 0;
}
.mattblacktabs li a {
	float: left;
	display: block;
	text-decoration: none;
	font-weight: bolder;
	margin: 0;
	padding: 7px 8px; /*padding inside each tab*/
	border-right: 1px solid white; /*right divider between tabs*/
	color: white;
	background: var(--accent); /*background of tabs (default state)*/
}
.mattblacktabs li a:visited {
	color: white;
        font-weight: bold;
        
}
.mattblacktabs li a:hover, .mattblacktabs li.selected a {
	background: #ffffff;
        color: var(--accent);
        font-weight: bolder;
}

/*============== styles for main content area ===============*/
#content {
/*	padding: 5px 30px 5px 30px;
	margin: 5px 30px 5px 30px;*/
	background-color: var(--stone);
	color: inherit;
}

/*===========content area list items==============*/
#content ul li {
	margin: 2px;
	padding: 2px;
}
#content li li {
	padding: 2px 0;
}


/*============== Styles for footer ===================*/
#footer {
	border-color: var(--accent);
	border-width: 3px;
	clear: both;
	padding: 5px;
	background-color: var(--stone);
	text-align: center;
        font-size: 85%;
	border-top-style: solid;
}
#footer p {
	margin-top: 0px;
	margin-bottom: 0px;
        font-size: 85%;
}
/*================== general styles =================*/
hr {
	width: 50%;
	text-align: center;
	background-color: var(--accent);
	height: 5px;
}
/* =================Styles for heading tags =============== */
h1, h2, h3, h4 {
	color: var(--accent);
	background-color: inherit;
  font-family: var(--font-serif);
  font-weight: 600;
}
h1 {
	padding: 5px;
	font-size: 1.85em;
text-align: center;
}
h2 {
	font-size: 1.5em;
text-align: center;
}
h3 {
	font-size: .9em;
}

h3.toc{
		font-size: 1.1em;
		font-family: var(--font-sans);
		font-variant:small-caps;
		margin-top: 20px;
		margin-bottom: 10px;
}
h4 {
	font-size: .9em;
}
/*================used to center anything==============*/
.center {
	text-align: center;
}

/* ============floats images to right or left ============*/
.imgrgt {
	 float:right;
	 padding: 7px;
}
.imglft {
	 float:left;
	 padding: 7px;
}
.smtxt {
	font-size:small;
}

/* =========== link styles =============*/

a:link {
	font-weight: normal;
	color: var(--accent);
	background: transparent;
	text-decoration : none;
}
a:visited {
	font-weight: normal;
	color: var(--accent);
	background: transparent;
	padding: 0px;
	text-decoration: none;
}
a:hover {
	font-weight: normal;
	text-decoration : underline;
	background: none;
	color: var(--black);
}
a:active {
	font-weight: normal;
	text-decoration : none;
	background:  none;
		
}

/* ============other styles ============*/
#crumb {
	color: var(--accent);
	font-size: x-small; 
}

hr {
	width: 90%;
        color: var(--accent);
	text-align: center;
	height: 2px;
}

/* Images */
.photo-left {
  float: left;
  margin: 0.25rem 0.75rem 0.5rem 0;
  border: 0;
}

.photo-center {
  display: block;
  margin: 0.5rem auto;
}

/* Notes */
.note-small {
  font-size: 0.9rem;
}

.site-search {
  margin: 0.75rem 0;
  padding: 0;
  border: none;
  background: transparent;
}

.site-search-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.site-search .gcse-search {
  font-size: 0.9rem;
}

/* Responsive YouTube embed */
.video-embed {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding-top: 56.25%; /* 16:9 */
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}