/*
	© Copyright 2022, TechKnowVation, Inc. and Rick McQueen, all rights reserved.
*/
@media screen {
	body {
		position:relative;
		top:100px;
		color:black;
		font-family:sans-serif;
	}
	h1 {
		color:black;
		font-family:sans-serif;
		text-align:center;
	}
	h2 {
		color:black;
		font-family:sans-serif;
		text-align:center;
	}
	h3 {
		color:black;
		font-family:sans-serif;
		text-align:center;
	}
	h5 {
		text-align:right;
	}
	ul {
		list-style-position:inside;
		margin: 0;
		margin-left: 10px;
		padding: 0;
	}
	table {
		margin-left:auto; 
		margin-right:auto;
		table-layout:fixed;
		border-collapse:collapse;
		border:1px solid #CCCCCC;
		padding:5px;
	}
	th {
		vertical-align:bottom;
		border:1px solid #CCCCCC;
		background-color:#CCCCCC;
		padding:5px;
	}
	td {
		vertical-align:top;
		border:1px solid #CCCCCC;
		padding:5px;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis; 
	}
	label   {
		vertical-align:top;
		font-weight:bold;
		font-size: 12pt;   
		display:inline-block;
		margin-right:5px;
	}
	input[type=text] { 
		background-color: white;
		vertical-align:top;
		text-transform:none; 
		font-family: sans-serif;
		font-size: 12pt;   
		margin-left:5px;
	}
	textarea {
		margin: 0px;
		padding: 3px;
		resize: none;
		color: black;
		background-color: white;
		font-family: sans-serif;
		font-size: 12pt;
		text-align: left;
		vertical-align:top;
	}
	#buttons {
		position:fixed;
		top: 99px;
		left: 0;
		width: 100%;
		height: 30px;
		background-color:#FFFFFF;
		margin:0px;
		padding:10px;
		filter:alpha(opacity=100);
		opacity:1.0;
	}
	#tablist {
		position:fixed;
		top: 100px;
		left: 0;
		width: 100%;
		height: 30px;
		background-color:#FFFFFF;
		padding:10px; 
		filter:alpha(opacity=100);
		opacity:1.0;
		margin: 0;
		list-style:none; 
	}
	#tablist ul {
		margin: 0;
		padding: 0;
		list-style:none; 
	}
	#tablist li {
		float:left; 
		margin-right:0.13em; 
	}
	#tablist li a {
		display:block;
		padding:0 1em;
		text-decoration:none;
		border: .1em solid black;
		font:bold 0.88em/2em arial,geneva,helvetica,sans-serif;
		color:#000;
		background-color:#ccc;
		/* CSS 3 elements */
		webkit-border-top-right-radius:0.50em;
		-webkit-border-top-left-radius:0.50em;
		-moz-border-radius-topright:0.50em;
		-moz-border-radius-topleft:0.50em;
		border-top-right-radius:0.50em;
		border-top-left-radius:0.50em;
	}
	#tablist li a:hover {
		background:white; 
		color:black;
		text-decoration:none;
	}
	/* Let's try a new heading style */
	#wrapper {
		position:fixed;
		top:0px;
		left:0px;
		margin: 0px;
		padding:0px;
		background-color:#FFFFFF;
		filter:alpha(opacity=100);
		opacity:1.0;
		display: table;
		width: 100%;
		min-width: 1200px;
		height: 100px;
	}
	#column-1 {
		display: table-cell;
		width: 400px;
		text-align:center;
		padding:5px;
		font-weight:bold;
	}
	#column-2 {
		display: table-cell;
		text-align:center;
		vertical-align:middle; 
		padding:5px;
	}
	#column-3 {
		display: table-cell;
		width: 400px;
		text-align:right;
		padding:5px;
	}
	/* New 2 Column Input area*/
	#newinput {
		width:1000px;
		margin:auto;
	}
	#newinput label {
		float: left;
		width: 500px;
		text-align: right;
		margin-right: 5px;
	}
	#newinput text, textarea, input, select {margin-left: 5px;}
	/* Citation Table */
	#cittable table {
		margin-left:auto; 
		margin-right:auto;
		table-layout:fixed;
		border-collapse:collapse;
		border:none;
		padding:5px;
	}
	#cittable tr {
		border:none;
	}
	#cittable th {
		vertical-align:bottom;
		border:1px solid #CCCCCC;
		background-color:white;    
		padding:5px;
	}
	#cittable td {
		vertical-align:top;
		border:none;
		padding:5px;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis; 
	}
	/* 
		Credit Card Input 
	*/
	#CCinput {
		width:1200px;
		margin:auto;
	}
	#CCinput label {
		float: left;
		width: 200px;
		text-align: left;
		margin-left: 5px;
		margin-right: 5px;
		vertical-align:middle;
		font-weight:bold;
		font-family:sans-serif;
		font-size: 12pt;   
		display:inline-block;
	}
	#CCinput span {
		text-align: left;
		margin-left: 5px;
		margin-right: 5px;
		vertical-align:middle;
		font-weight:bold;
		font-family:sans-serif;
		font-size: 12pt;   
		display:inline-block;
	}
	#CCinput text, textarea, input, select {
		text-align: left;
		margin-left: 5px;
		margin-right: 5px;
		vertical-align:middle;
		font-family:sans-serif;
		font-size: 12pt;   
		display:inline-block;
		text-transform:none; 
	}
	#CCinput input[type=text] {
		text-transform:none; 
	}
	/* */
	#header {
		position:fixed;
		top:0px;
		left:0px;
		width: 100%;
		height: 100px;
		margin: 0px;
		padding:0px;
		background-color:#FFFFFF;
		filter:alpha(opacity=100);
		opacity:1.0;
	}
	#header img {
		float:left;        
		padding:5px;
		margin-top: 10px;
		border:0;
	}
	#header div {
		float:right; 
		padding:5px;
		margin-top: 10px;
		border:0;
		text-align:right;
		vertical-align:middle; 
	}
	#header table {
		float:right; 
	/*	width: 600px;  */
		width: 300px;
		margin: 3px;
		margin-top: 20px;
		border: 2px solid white;
	/*	font-size: small;  */
	}
	#header th {
		background-color:white;
		border:1px solid white;
		text-align:right;
		vertical-align:bottom; 
		padding:3px;
		font-size: small;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis; 
	}
	#header td {
		text-align:right;
		border:1px solid white;
		padding:3px;
		font-size: small;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis; 
	}
	#footer {
		position:fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 30px;
		background-color:#FFFFFF;
		margin:0px;
		padding:10px;
		filter:alpha(opacity=100);
		opacity:1.0;
	}
	#terms {
	/*	border: 1px solid #000; */
		margin-left: 0;
		padding-left: 2em;
		text-indent: -1.5em;
	}
}
/* The Modal Popup Window */
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 10px; /* Location of the box */
  padding-bottom: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Header */
.modal-header {
  padding: 2px 16px;
/*  background-color: #5cb85c; */
  background-color: grey;
  color: white;
}
/* Modal Body */
.modal-body {padding: 2px 16px;}
/* Modal Footer */
.modal-footer {
  padding: 2px 16px;
/*  background-color: #5cb85c; */
  background-color: grey;
  color: white;
}
/* Modal Content/Box */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: 100px;
  padding:0;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 3.0s;
  animation-name: animatetop;
  animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}
@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}
/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
/* End of Modal Popup Window*/
@media print {
	body {
/*		position:relative;
		top:150px;    */
		color:black;
		font-family:sans-serif;
	}
	h1 {
		color:black;
		font-family:sans-serif;
		text-align:center;
	}
	h2 {
		color:black;
		font-family:sans-serif;
		text-align:center;
	}
	h3 {
		color:black;
		font-family:sans-serif;
		text-align:center;
	}
	h5 {
		text-align:right;
	}
	ul {
		list-style-position:inside;
		margin: 0;
		margin-left: 10px;
		padding: 0;
	}
	table {
		margin-left:auto; 
		margin-right:auto;
		table-layout:fixed;
		border-collapse:collapse;
		border:1px solid #CCCCCC;
		padding:5px;
	}
	th {
		vertical-align:bottom;
		border:1px solid #CCCCCC;
		background-color:#CCCCCC;
		padding:5px;
	}
	td {
		vertical-align:top;
		border:1px solid #CCCCCC;
		padding:5px;
		white-space: normal; 
/*		white-space:nowrap;  */
		overflow:hidden;
		font-size: 10pt;
	}	
	#tablist {
/*		position:fixed;
		top: 100px;			*/
		left: 0;
		width: 100%;
		height: 30px;
		background-color:#FFFFFF;
		padding:10px; 
		filter:alpha(opacity=100);
		opacity:1.0;
		margin: 0;
		list-style:none; 
	}
	#tablist ul {
		margin: 0;
		padding: 0;
		list-style:none; 
	}
	#tablist li {
		float:left; 
		margin-right:0.13em; 
	}
	#tablist li a {
		display:block;
		padding:0 1em;
		text-decoration:none;
		border: .1em solid black;
		font:bold 0.88em/2em arial,geneva,helvetica,sans-serif;
		color:#000;
		background-color:#ccc;
		/* CSS 3 elements */
		webkit-border-top-right-radius:0.50em;
		-webkit-border-top-left-radius:0.50em;
		-moz-border-radius-topright:0.50em;
		-moz-border-radius-topleft:0.50em;
		border-top-right-radius:0.50em;
		border-top-left-radius:0.50em;
	}
	#header {
/*		position:fixed;
		top:0px;			*/
		left:0px;
		width: 100%;
		height: 100px;
		margin: 0px;
		padding:0px;
		background-color:#FFFFFF;
		filter:alpha(opacity=100);
		opacity:1.0;
	}
	#header img {
		float:left;        
		padding:5px;
		margin-top: 10px;
		border:0;
	}
	#header div {
		float:right; 
		padding:5px;
		margin-top: 10px;
		border:0;
		text-align:right;
		vertical-align:middle; 
	}
	#header table {
		float:right; 
	/*	width: 600px;  */
		width: 300px;
		margin: 3px;
		margin-top: 20px;
		border: 2px solid white;
	/*	font-size: small;  */
	}
	#header th {
		background-color:white;
		border:1px solid white;
		text-align:right;
		vertical-align:bottom; 
		padding:3px;
		font-size: small;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis; 
	}
	#header td {
		text-align:right;
		border:1px solid white;
		padding:3px;
		font-size: small;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis; 
	}
}