﻿.sortable, .view
{
	border-collapse:collapse;
	width:100%;
	color:#FFFFFF;
	text-align:left;
	font-family:LithosProBlack;
	text-shadow: 2px 2px 2px #000000;
	font-size:0.95em;
	table-layout: fixed;
	margin:0 auto 0 auto;
	font-weight:bold;
}

.view, .view th, .view td
{
	border:2px black solid;
}

.sortable .th-sort-asc::after {
	content: "\25b4";
}

.sortable .th-sort-desc::after {
	content: "\25be";
}

.sortable .th-sort-asc::after,
.sortable .th-sort-desc::after {
	margin-left: 5px;
}

.sortable .th-sort-asc,
.sortable .th-sort-desc 
{
	background-color: darkred;
	background-repeat:no-repeat;
	background-size:100% 100%;
}

.sortable th
{	
	cursor: pointer;
	border-collapse:collapse;
	text-align:center;
	color:#FFFFFF;
	background-color: #000000;
	font-size:0.95em;
	height:2.8em;
	position:sticky; 
	top:0;
	z-index:1;
}

.view th
{	
	background-image:url(../chimera%20artwork/row_back_2.png);
	background-size: 100% 100%;
	background-position:right;
	cursor: pointer;
	border-collapse:collapse;
	text-align:center;
	color:#FFFFFF;
	background-color: black;
	font-size:0.95em;
	height:2.8em;
}


th:hover
{
	color:red;
	background-color: #000000;
}

.sortable tr > :nth-child(1)
{
	border-left:10px red none;
}

.sortable tr > :nth-last-child(1)
{
	border-right:10px red none;
}

td.highlight:hover, td.viewer:hover
{
	background-image:none;	
	color:#000000;
	background-color:#00CCFF;
	text-shadow: none;
	margin:0 auto 0 auto;
}

td, tr
{
	text-align:center;
	background-image:url(../chimera%20artwork/row_back_2.png);
	background-size: 100% 100%;
	background-position:right;
	border-collapse:collapse;
	font-size:0.95em;
	height:2.05em;
}

.sortable td
{
	border:2px black solid;
}

.column
{
	width:90%;
	display:flex;
	flex-direction:column;
	gap: 10px;
	margin-bottom:20px;
	margin-left:0;
}

.fake_button1:hover 
{
	background-color:  cornflowerblue;
}

.fake_button1:active 
{
	background-color:  brown;
	box-shadow: 0 5px red;
	transform: translateY(4px);
}

.fake_button1
{
	font-size:20px;
	
	color: white;
	cursor: pointer;
	text-align:center;
	border:5px solid darkred;
	background-color: black;

	height:auto;
	
	padding:5px 5px 5px 5px;
	
	border-radius:10px;
	-webkit-border-radius: 10px;	
	-khtml-border-radius: 10px;
	vertical-align:middle;
	box-shadow: 5px 5px 5px #000000;
	-webkit-box-shadow: 5px 5px 5px #000000; /* Safari and Chrome */
	text-shadow:0.06em 0.06em 0.06em #FF0000;
	
	font-family:LithosProBlack;
	font-stretch:expanded;
	font-variant:small-caps;
	font-weight:bold;
}

.info
{
	font-size:20px;
	
	color: white;
	text-align:center;
	border:2px solid darkred;
	background-color: black;

	height:auto;
	
	display:flex;
	flex-direction:row;
	gap:30%;
		
	border-radius:10px;
	-webkit-border-radius: 10px;	
	-khtml-border-radius: 10px;
	vertical-align:middle;
	text-shadow:0.06em 0.06em 0.06em #FF0000;
	
	padding:0 15px 0 15px;
	
	font-family:LithosProBlack;
	font-stretch:expanded;
	font-variant:small-caps;
	font-weight:bold;
}

div.input_label
{
	width:900px;
	height:500px;
	margin-left:auto;
	margin-right:auto;
	
	background-image: url(../chimera%20artwork/Background_box.png);
	background-size:cover;

	text-align:left;
	color:#FFFFFF;
	font-family:LithosProBlack;
	font-stretch:expanded;
	font-variant:small-caps;
	font-size:20px;
	font-weight:bold;
	text-shadow:0.06em 0.06em 0.06em  #330000;
	
	background-color:transparent;
	border:1px solid  #330000;
	border-top-color:#FFFFFF;
	border-right-color:#FFFFFF;
	border-radius:10px;
	padding:10px 10px 10px 10px;
}

.input_field_2
{
	width:200px;
	height:30px;
	float:right;
	vertical-align:text-bottom;
	background-color: #990000;
	color: #FFFFFF;
	margin-right:5%;
	
	font-family:LithosProBlack;
	font-stretch:expanded;
	font-variant:small-caps;
	font-size:16px;
	font-weight:bold;
	
	border:2px white solid;
	
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	border-top-color:#FFFFFF;
	border-bottom-color:#CC3333;
	border-right-color:#CC3333;
}

.input_field_3
{
	float:right;
	width:100px;
	height:24px;
	vertical-align:central;
	background-color: #990000;
	color: #FFFFFF;
	margin-right:5%;
	font-family:LithosProBlack;
	font-stretch:expanded;
	font-variant:small-caps;
	font-size:24px;
	font-weight:bold;
	
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	border-top-color:#FFFFFF;
	border-bottom-color:#CC3333;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #000; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #555; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #fff; 
}

p
{
	display:block;
	line-height:30px;
}
	
body
{
	color: #FFFFFF;
	background-color: transparent;
	margin:0 0 0 0;
	padding:0 0 0 0;
}
	
a 
{	
	text-decoration: none;
}

a:link
{
	color:#FF0000;
}
a:visited
{
	color:#FFFFFF;
}
a:hover
{
	color: #FFFFFF;
}
a:active
{
	color:#FFFFFF;
}

.pop, .rep
{
	font-size:inherit;
	color: white;
	cursor: pointer;
	text-align:center;
	border:2px solid darkred;
	background-color: black;
	height:auto;		
	border-radius:10px;
	-webkit-border-radius: 10px;	
	-khtml-border-radius: 10px;
	vertical-align:middle;
	box-shadow: 5px 5px 5px #000000;
	-webkit-box-shadow: 5px 5px 5px #000000; /* Safari and Chrome */
	text-shadow:0.06em 0.06em 0.06em #FF0000;
	
	font-family:LithosProBlack;
	font-stretch:expanded;
	font-variant:small-caps;
	font-weight:bold;

}

/* The Modal (background) */
.popup {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  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 */
  top:0;
}

/* Modal Content/Box */
.popcon {
  background-color: black;
  margin: 0 auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  height: 600px;
  z-index:10;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
