:root {
	--headerColor: #8E95D8;
	--classColor: #8BE68B;
	--orderColor: #A1EEA1;
	--familyColor: #E4FDE4;
	--speciesColor: #D1D5F6;
	--nonSpeciesColor: #E6E8FC;
	--dataColor1: #FFD3D3;
	--dataColor2: #FFE6E6;
	--dataColor3: #ffeec0;
	--dataColor4: #fff8e6;
	--yearColor: #CED6d6;
	--checkRadioColor: #2D882D;
	--checkRadioHoverColor: #8BE68B;
	--checkRadioBackColor: #d3d3d3;
	--buttonBackColor: #D0D0D0;	
	--lightYellow: #ffffe6;
    --sortColor: #72CC88;
    --noSortColor: #7289CC;
}

.body {
	font-size:12px;
}

.checkcontainer {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	/* font-size: 12px; */
	user-select: none;
}

.checkcontainer input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: var(--checkRadioBackColor);
}

.checkcontainer:hover input~.checkmark {
	background-color: var(--checkRadioHoverColor);
}

.checkcontainer input:checked~.checkmark {
	background-color: var(--checkRadioColor);
}

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

.checkcontainer input:checked~.checkmark:after {
	display: block;
}

.checkcontainer .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

.radiocontainer {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	/* font-size: 12px; */
	user-select: none;
}

.radiocontainer input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.radiomark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color:var(--checkRadioBackColor);
	border-radius: 50%;
}

.radiocontainer:hover input~.radiomark {
	background-color: var(--checkRadioHoverColor);
}


.radiocontainer input:checked~.radiomark {
	background-color:var(--checkRadioColor);
}


.radiomark:after {
	content: "";
	position: absolute;
	display: none;
}


.radiocontainer input:checked~.radiomark:after {
	display: block;
}


.radiocontainer input:checked~.radiomark {
	background-color: var(--checkRadioColor);
}


.radiomark:after {
	content: "";
	position: absolute;
	display: none;
}

.radiocontainer input:checked~.radiomark:after {
	display: block;
}

.radiocontainer .radiomark:after {
	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}


table.speciesTable {
	border-collapse: collapse;
	table-layout: fixed;
	max-width: 1000px;	
}

td {
	border-top: none;
	border-bottom: 1px solid black;
	border-left: none;
	border-right: none;
}

th {
	/* background-color: var(--headerColor); */
    background-color: var(--noSortColor);
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	text-align: center;
}
th.headerAZ
{
    background-image: linear-gradient(var(--sortColor), white) 
}
th.headerZA
{
    background-image: linear-gradient(white, var(--sortColor))
}

tr {
	border-left: 1px solid black;
	border-right: 1px solid black;
}

tr.bottomSpeciesRow, tr.summaryRow, tr.controlBottomRow, tr.bottomSummaryRow{
	border-bottom: 1px solid black;
}

tr.classRow {
	background-color: var(--classColor);
}

li.classListItem {
	display: inline-block;
	background-color: var(--classColor);
	width: 200px;			
}

tr.orderRow {
	background-color: var(--orderColor);
}

li.orderListItem {
	display: inline-block;
	background-color: var(--orderColor);
	width: 200px;			
}

ul {
	list-style: none;
	padding-left: 0;
}

tr.familyRow {
	background-color: var(--familyColor);
}

li.familyListItem {
	display: inline-block;
	background-color: var(--familyColor);
	width: 200px;	
}

td.classLatinName, td.orderLatinName, td.familyLatinName, td.altLatinName {
	font-style: italic;
	text-align: left;
	border-right: 1px solid black;
}

li.speciesListItem {
	display: inline-block;
	background-color: var(--speciesColor);
	width: 200px;				
}

td.latinName {
	font-style: italic;
	text-align: right;
}

td.className, td.orderName, td.familyName, td.speciesName {
	font-weight: bold;
	text-align: left;
}

tr.classRow, tr.orderRow, tr.familyRow, tr.speciesRow {
	border-bottom: 1px solid black;
}

td.speciesName {
	background-color: var(--speciesColor);
	border-right: 1px solid black;
}

td.latinName, td.intName, td.blankName, td.altLatinName {
	background-color: var(--nonSpeciesColor);
}

td.year {
	background-color: var(--yearColor);
	border-left: 1px solid black;
}

td.onFive {
	background-color: var(--dataColor1);
	border-left: 1px solid black;
	text-align: center;
}

td.onFiveAlt {
	background-color: var(--dataColor3);
	border-left: 1px solid black;
	text-align: center;
}

td.offFive {
	background-color: var(--dataColor2);
	text-align: center;
}

td.offFiveAlt {
	background-color: var(--dataColor4);
	text-align: center;
}

td.orderCell {
	background-color: var(--dataColor4);	
}

td.optioncontrol {
	background-color: var(--dataColor2);	
}

td.viewcell, tr.comparerow {
	background-color: var(--nonSpeciesColor);	
}

button.smallbutton {
	width: 30px;
	height: 26px;
	border:0px;
	background-color: var(--buttonBackColor);	
}

button.bigbutton {
	width: 120px;
	height: 26px;
	border:0px;	
	background-color: var(--buttonBackColor);
	vertical-align: top;			
}

button.bigbutton:hover, button.smallbutton:hover{
	background-color: var(--checkRadioHoverColor);
	vertical-align: top;	
}

input.textbox{
	width: 150px;
	background-color: var(--lightYellow);
	border:0px;
	height: 23px;
	margin-top: -0px;
}

select {
	border:0px;
	height: 25px;
	width: 200px;
	background-color: var(--lightYellow);	
	vertical-align: top;	
}

.tabularRow {
	clear:both;
	padding: 0px;
	margin: 0px;
}

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child {margin-left: 0;}
.tabularGroup:before, .tabularGroup:after {
	content:"";
	display:table;
}
.tabularGroup:after {
	clear:both;
}

div.keyClass {
	background-color: var(--classColor);
	width: 200px;
}
div.keyOrder {
	background-color: var(--orderColor);
	width: 200px;	
}
div.keyFamily {
	background-color: var(--familyColor);
	width: 200px;	
}
div.keySpecies{
	background-color: var(--speciesColor);
	width: 200px;	
}


.span3of3{width:32.2%}
.span2of3{width:32.2%}
.span1of3{width:32.2%}

@media only screen and (max-width: 960px) {
	.col {  margin: 1% 0 1% 0%; }
	.span1of3, .span2of3 { width: 50%; }
	.span3of3 {width:100%}
}

@media only screen and (max-width: 800px) {
	td, th, button{font-size:9pt;}	
	button.bigbutton {width: 100px;}
}
@media only screen and (max-width: 750px) {
	td, th, button{font-size:8pt;}	
	button.bigbutton {width: 100px;}
}


@media only screen and (max-width: 700px) {
	td, th, button{font-size:7pt;}	
	button.bigbutton {width: 80px;}
	input.textbox{width: 100px;}
	select{width:130px;}	
	.col {  margin: 1% 0 1% 0%; }
	.span1of3, .span2of3 { width: 50%; }
	.span3of3 {width:100%}
}

@media only screen and (max-width: 540px) {
	td, th , button{font-size:6pt;}
	button.bigbutton {width: 60px;}
	button.smallbutton {width: 20px;}	
	input.textbox{width: 80px;}	
	select{width:130px;}				
	.col {  margin: 1% 0 1% 0%; }
	.span1of3, .span2of3, .span3of3 { width: 100%; }
}