/* ============================================================================
 * 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;
	}

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.leftHalf
	{
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px #404040;
	padding: 0px;
	display: table-cell;
	width: 50%;
	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 0px 0px;
	display: table-cell;
	width: 33%;
	min-width: 250px;
	text-align: right;
	vertical-align: middle;
	}

div.navigation div.rightHalf
	{
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px #404040;
	padding: 0px;
	display: table-cell;
	width: 50%;
	vertical-align: middle;
	text-align: right;
	}


div.content
	{
	min-width: 1100px;
	overflow-y: auto;
	overflow-x: auto;
	position: absolute;
	top: 0px;
	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: 20px; }
ul li    { overflow:hidden; margin: 0px; padding: 0px; }
ul.local { padding-left: 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);
	}

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; }

div.scope
	{
	overflow-x: auto;  /* Enables horizontal scrolling */
	width: 100%; 
	}

table.scope {
	border: 1px solid #000000;
	border-collapse: separate;
	border-spacing: 0;
	}

table.scope th, td { border: 1px solid #000000; padding: 1px 4px 1px 4px; vertical-align: top; }

table.scope tr.spacer td { padding-top: 15px; border: 1px solid #000000; ;}
table.scope tr td.bold { font-weight: bold; }
table.scope tr td.subHead { font-weight: bold; padding-top: 5px; color: #222277;}


table.scope tr.header 
	{
	position: -webkit-sticky;
	position: sticky;
	top: -1;
	background-color: #DDDDDD;
	z-index: 10;
	box-shadow: inset 0 -1px 0 0 #000000; /* Simulated bottom border */
	}
	
table.scope tr:hover { background-color: #E0E088; }
table.scope tr.header:hover { background-color: #DDDDDD; }
table.scope tr.spacer:hover { background-color: #FFFFFF; }


/* ============================================================================
 * 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;
	}	

/* ============================================================================
 * Highlighting for lines that are to be determined.
 * ============================================================================
 */
li.tbdlight  { background-color: #EEEEAA; }
li.tbddark   { background-color: #DADA96; }
li.tbdlight:hover, li.tbddark:hover { background-color: #D0D044; }

/* ============================================================================
 * Custom formatting for Orphans
 * ============================================================================
 */
li.tbd                   { background-color: #FFFF66; }
li.tbd:hover			 { background-color: #DDDD00; }