/* ============================================================================
 * Typeface definitions that will be used throughout webpages employing this
 * cascading stylesheet.
 * ============================================================================
 */
@font-face {
  font-family: 'Normal';
  font-style: normal;
  font-weight: 400;
  src: local('Cabin'), local('Cabin-Regular'), url(https://fonts.gstatic.com/s/cabin/v11/K6ngFdK5haaaRGBV8waDwA.ttf) format('truetype');
  }

@font-face {
  font-family: 'Label';
  font-style: normal;
  font-weight: 400;
  src: local('Cabin'), local('Cabin-Regular'), url(https://fonts.gstatic.com/s/cabin/v11/K6ngFdK5haaaRGBV8waDwA.ttf) format('truetype');
}

@font-face {
  font-family: 'Heading';
  font-style: normal;
  font-weight: 400;
  src: local('Libre Baskerville'), local('LibreBaskerville-Regular'), url(https://fonts.gstatic.com/s/librebaskerville/v4/pR0sBQVcY0JZc_ciXjFsKwAUTJOA6-irsSazDq377BE.ttf) format('truetype');
}

@font-face {
  font-family: 'Title';
  font-style: normal;
  font-weight: 400;
  src: local('Times New Roman'), local('Georgia');
  }


* 	{
	font: 10pt/13pt "Normal", sans-serif, helvetica;
	}	

	
body
	{
	padding: 0px;
	margin: 0px;
	}

sup 
	{
	vertical-align: super;
	font-size: smaller;
	}

.bold	{
	font-weight: bold;
	}
	
div.header 
	{ 
	text-align: center; 
	width: 100%; 
	min-width: 500px; 
	background-color: #FFFFFF; 
	margin: 0 auto;
	padding-top: 0px;
	padding-bottom: 20px;
	}
	
div.header img { width: 100%; min-width: 500px; max-width: 1000px; }

div.header div.title, div.header div.subtitle
	{
	font: 64px "Title", serif, Times;
	font-size: calc(32px + 1.6vw);
	padding-top: 60px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-shadow: 1px 1px 3px #404040;
	margin: 0 auto;
	max-width: 75%;
	}
	
div.header div.subtitle
	{
	font: 32px "Title", serif, Times;
	font-size: calc(24px + .25vw);
	letter-spacing: 8px;
	padding-top: 0px;
	padding-bottom: 10px;
	}

div.header hr
	{
	border-top: 3px solid #880000;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15);
	width: 60%;
	max-width: 1000px;
	}

div.navigation 	{ 
	display: table;
	text-align: left; 
	background-color: #FFFFFF; 
	width: calc(100% - 30px); 
	min-width: 500px; 
	border-width: 2px; 
	border-style: solid none solid none; 
	border-color: #880000; 
	padding: 0px 20px 0px 10px; 
	margin: 10px 0px 0px 00px;
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	z-index: 100;
	}

div.navigation img.navigation { width: 36px; }

div.navigation div
	{
	font: 20px "Normal", sans-serif, helvetica;
	}
	
div.navigation div.left
	{
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px #404040;
	padding: 0px;
	display: table-cell;
	width: 33%;
	vertical-align: middle;
	}


div.navigation div.center
	{
  	width: 33%;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	text-shadow: 1px 1px 2px #404040;
  	display: table-cell;
 	vertical-align: middle;
  	text-align: center;
	}

div.navigation div.right
	{
	padding: 6px 0px 6px 0px;
	display: table-cell;
	width: 33%;
	min-width: 250px;
	text-align: right;
	vertical-align: middle;
	}

div.content
	{
	overflow-y: auto;
	overflow-x: auto;
	position: absolute;
	top: 64px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	padding: 0px;
	margin: 0px;
	}
p
	{
	width: 100%;
	margin: 0px;
	padding: 5px 0px 10px 0px;
	}
	
a:link    { color: #2222CC; background-color: transparent; text-decoration: none;}
a:visited { color: #662288; background-color: transparent; text-decoration: none;}
a:hover   { color: #CC2222; background-color: transparent; text-decoration: underline;}

ul	{ padding-left: 5px; }
ul ul { padding-left: 22px; }
ul li { overflow:hidden; margin: 0px; padding: 0px; }

ul div.super
	{
	border-radius: 10px;
	border: 2px solid #7F7F7F;
	margin: 10px;
	padding: 5px;
	width: calc(100% - 40px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	transition: box-shadow 0.1s ease-in-out;
	}
	
ul div.super:hover
	{
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
	}

ul div.super p
	{
	font-style: inherit;
	color: #000000; 
	text-decoration: none;
	}

ul div.super p a
	{
	font-weight: bold;
	}

li.end	{padding-bottom: 10px; }

li.super { width: 100%; }
li.super div { display: inline-block; float: left; }
li.super div:nth-of-type(1)   { width: 70px; }
li.super div:nth-of-type(2)   { width: calc(100% - 70px); }
li.super h1
	{
	white-space: nowrap;
	color: #444466;
	height: 16px;
	margin-top: 10px;
	margin-bottom: 0px;
	font: 16px/16px "Normal", sans-serif, helvetica;
	font-weight: bold;
	letter-spacing: 0px;
	text-align: left;
	padding: 0px 0px 0px 0px;
	border-collapse: collapse;
	}

/* ============================================================================
 * These tags are used to create contrast between different list rows.
 * ============================================================================
 */
li.dark              	 { background-color: #EBEBEB; }
li.light             	 { background-color: #FFFFFF; }

/* ============================================================================
 * For the top most items (those that expand into a list), I want to disable
 * the background coloring features.
 * ============================================================================
 */
li.title                   { background-color: #FFFFFF; padding: 12px 0px 0px 0px; 	border-bottom: 1px solid #880000;}

/* ============================================================================
 * For the top most items (those that expand into a list), I want to disable
 * the background coloring features.
 * ============================================================================
 */
li.top                   { background-color: #FFFFFF; }
li.top:hover             { background-color: #FFFFFF; }

/* ============================================================================
 * This is a version of the tab object that has two sections.
 * ============================================================================
 */
li.tab2	{ width: 100%; }
li.tab2 div { display: inline-block; float: left; font: 10pt/13pt "Normal", sans-serif, helvetica; letter-spacing: 0px; text-align: left; }
li.tab2 div:nth-of-type(1)   { width: calc(400px - (100vw - 100%)); padding: 2px 0px 4px 0px; }
li.tab2 div:nth-of-type(1) span	{ vertical-align: middle; color: #444466; font: 10pt/13pt "Normal", sans-serif, helvetica; letter-spacing: 0px; text-align: left; }
li.tab2 div:nth-of-type(1) span a	{ font: 10pt/13pt "Normal", sans-serif, helvetica; letter-spacing: 0px; text-align: left; }
li.tab2 div:nth-of-type(1) span.top	{ font-weight: bold;}
li.tab2 div:nth-of-type(1) span.top a	{ font-weight: bold;}
li.tab2 div:nth-of-type(1) span.title	{ font-weight: bold; padding-left: 20px;}
li.tab2 div:nth-of-type(1) span.title a	{ font-weight: bold;}

li.tab2 div:nth-of-type(2)   { width: calc(100vw - 400px); padding: 2px 0px 4px 0px; }


/* ============================================================================
 * This definition causes every other list item to be colored light gray, 
 * making it easier for the reader to distinguish between objects.
 * ============================================================================
 */
/* li.tab2:nth-of-type(even) { background-color: #EBEBEB; } */
/* li.tab2:nth-of-type(odd)  { background-color: #FFFFFF; } */

li.tab2:hover             { background-color: #CECECE; }
li.tab2.subHead           { padding-top: 5px; background-color: #FFFFFF; }
li.tab2.subHead div	span  { padding-left: 24px; text-decoration: underline;}
	
li.label2 { border-style: solid none solid none; border-width: 1px; border-color: #CCC; }
li.label2 div { display: inline-block; float: left; font: 10pt/13pt "Normal", sans-serif, helvetica; letter-spacing: 0px; text-align: left; }
li.label2 div:nth-of-type(1) { width: calc((400px - (100vw - 100%)) - 23px); padding-left: 23px}
li.label2 div:nth-of-type(2) { width: 150px; }
li.label2 div:nth-of-type(3) { width: calc(100vw - 600px); }


/* ============================================================================
 * The viewTopBtn is the button that is displayed at the beginning of a top 
 * level expandable list. 
 * ============================================================================
 */
.viewTopBtn, .viewTopIcon
	{
	background-color: #FFFFFF;
	border: 2px solid #FFFFFF;
	padding: 0px;
	text-align: center;
	font-size: 16px;
	width: 60px;
	}
	
.viewTopBtn 
	{
	cursor: pointer;
	}
	
.viewTopBtn:hover 
	{
	border-radius: 7px;
	border: 2px solid #7F7F7F;
	}

.viewTopBtn:active 
	{
	background-color: #5681AF;
	}	

/* ============================================================================
 * The viewSubBtn is the button that is displayed at the beginning of a sub 
 * level expandable list. 
 * ============================================================================
 */
.viewDocBtn
	{
	vertical-align: middle;
	}

.viewSubBtn
	{
	vertical-align: middle;
	}
	
.viewSubBtn:hover 
	{
	background-color: #CCDDFF;
	cursor: pointer;
	}

.viewSubBtn:active 
	{
	background-color: #5681AF;
	}	

/* ============================================================================
 * This is a version of the tab object that has two sections.
 * ============================================================================
 */
li.tab3	{ width: 100%; }
li.tab3 div { display: inline-block; float: left; font: 10pt/13pt "Normal", sans-serif, helvetica; letter-spacing: 0px; text-align: left; }
li.tab3 div:nth-of-type(1)   { width: calc(450px - (100vw - 100%)); padding: 2px 0px 4px 0px; }
li.tab3 div:nth-of-type(1) span	{ vertical-align: middle; color: #444466; font: 10pt/13pt "Normal", sans-serif, helvetica; letter-spacing: 0px; text-align: left; }
li.tab3 div:nth-of-type(1) span a	{ font: 10pt/13pt "Normal", sans-serif, helvetica; letter-spacing: 0px; text-align: left; }
li.tab3 div:nth-of-type(1) span.top	{ font-weight: bold;}
li.tab3 div:nth-of-type(1) span.top a	{ font-weight: bold;}
li.tab3 div:nth-of-type(1) span.title	{ font-weight: bold; padding-left: 20px;}
li.tab3 div:nth-of-type(1) span.title a	{ font-weight: bold;}
li.tab3 div:nth-of-type(2)   { width: 150px; padding: 2px 0px 4px 0px; }
li.tab3 div:nth-of-type(3)   { width: calc(100vw - 650px); padding: 2px 0px 4px 0px; }


/* ============================================================================
 * This definition causes every other list item to be colored light gray, 
 * making it easier for the reader to distinguish between objects.
 * ============================================================================
 */
/* li.tab3:nth-of-type(even) { background-color: #EBEBEB; } */
/* li.tab3:nth-of-type(odd)  { background-color: #FFFFFF; } */

li.tab3:hover             { background-color: #CECECE; }
li.tab3.subHead           { padding-top: 5px; background-color: #FFFFFF; }
li.tab3.subHead div	span  { padding-left: 24px; text-decoration: underline;}
	
li.label3 { border-style: solid none solid none; border-width: 1px; border-color: #CCC; }
li.label3 div { display: inline-block; float: left; font: 10pt/13pt "Normal", sans-serif, helvetica; letter-spacing: 0px; text-align: left; }
li.label3 div:nth-of-type(1) { width: calc((450px - (100vw - 100%)) - 23px); padding-left: 23px}
li.label3 div:nth-of-type(2) { width: 150px; }
li.label3 div:nth-of-type(3) { width: calc(100vw - 650px); }
