/********** ALL **********/

body {
	
	width:fit-content;
	margin: 0 auto;
	padding-top:10px;
	
	/* display:flex; */
	/* justify-content:center; */
	/* min-width:100%; */
	
	font-family:tahoma;
	background-color:#edca85;
}

div.home_div {
	
	display:block;
	min-width:50vw;
	
	/* display:inline-block; */
	/* width:fit-content; */
	/* max-width:none; */
	
	padding-left:10px;
	padding-right:10px;
	border:3px solid #770000;
	border-radius:20px;
	box-shadow:2px 2px 6px #770000;
}

div.big-box {
	display:flex;
	justify-content:center;
	align-items:center;
}

span.big-box {
	
	/* max-width:50vw; */
	max-width:none;
	
	padding-top:20px;
	padding-left:20px;
	padding-right:20px;
}

span.big-box-short {
	
	/* max-width:50vw; */
	max-width:none;
}

.copyright { font-size:11px; }

/********************/





/********** LOGO **********/

p.aa { margin-top:0px; }

p.aa > a {
	font-weight:semi-bold;
    font-size:35px;
    text-decoration:none;
    color:black;
}

span.ampersand { font-size:60px; }

p.cn-upper {
	margin-top:15px;
	margin-bottom:0px;
	
	font-family:'trebuchet ms';
	font-weight:bold;
	font-size:30px;
}

p.cn-upper > a {
	text-decoration:none;
	color:black;
}

p.cn-lower {
	margin-top:0px;
	font-family:'trebuchet ms';
	font-size:16px;
}

/********************/





/********** ALL (in text) **********/

p.big-title{
	font-size: 20px;
	margin-bottom: 0px;
}

a { color:blue; }

.tab { margin-left:40px; }

ul {
  margin-top:0px;
  margin-bottom:0px;
  padding-left: 2em;
}

.simple-link {
	text-decoration:none;
	color:black;
}

span.boxed-number {
	border: 1px solid black;
	padding: 3px;
	display:inline-block;
}

/********************/





/********** TEXT CONTAINERS **********/

div.partial {
	min-width:0px;
	max-width:fit-content;
}

div.full { max-width:50vw; }

span.fullest { min-width:50vw; }

/********************/





/********** DETAILS/SUMMARY **********/

div.detail {
	
	white-space:normal;
	word-break:break-word;
	
	padding:8px;
	
	border: 1px solid black;
	border-radius:10px;
}

summary { font-size:16px; }

details { display:block; }

details > ul { list-style:none; }

details:not(.intro):open {
	border: 2px solid black;
	border-radius: 8px;
	padding: 4px;
	padding-right: 2em;
	margin-top: 8px;
	margin-bottom: 8px;
	box-shadow: inset 0 0 10px rgba(204, 147, 24, 0.8);
	background: #F7CC78;
}
details:not(.intro):open > summary {
    font-weight: bold;
}

/********************/





/********** UPDATE LOG **********/

td.update-date { width:130px; }

.updates { font-size:13px; }

/********************/





/********** SPECIES NAMES **********/

tr.name_line td {padding:1px 12px;}

.letter_link { font-size:20px; }

table.letter_link a { color:black; }

table.letter_link td {
	min-width: 30px;
	text-align:center;
}

.letter_line {
	font-size:20px;
	font-weight:bold;
}

.reverser_big {
	font-size:15px;
	font-weight:bold;
	vertical-align:middle;
}

.reverser_little {
	font-size:12px;
	vertical-align:middle;
}

#crypt {
	display: none;
}

.cryptic {
	display: none;
}

div:has(#crypt:checked) .cryptic {
	display: table-row;
}

#cryptic-hidden {
	font-size:15px;
	font-weight:bold;
	vertical-align:middle;
}

#cryptic-shown {
	font-size:12px;
	vertical-align:middle;
	font-weight:normal;
}

div:has(#crypt:checked) #cryptic-hidden {
	font-size:12px;
	vertical-align:middle;
	font-weight:normal;
}

div:has(#crypt:checked) #cryptic-shown {
	font-size:15px;
	font-weight:bold;
	vertical-align:middle;
}

/********************/





/********** TAXONOMY **********/

div.legend_wrap {
	width:fit-content;
	min-width:100%;
}

div.legend {
	max-width:fit-content;
	white-space:normal;
	word-break:break-word;
	
	padding:8px;
}

.taxtable {
	
	
	/* width:100%; */
	
	/* width:max-content; */
	
	width:50vw;
	
	table-layout:auto;
	/* border-spacing:20px; */
	border-spacing:10px;
	font-style:italic;
}

.taxtable details * {
	white-space: nowrap;
}

td.taxa {vertical-align:top;}

p.wing {
	margin-top:0px;
	font-size:28px;
}

/********************/





/********** TAXONOMY --- LEGEND **********/

.phya {color:#750010;}
.phyb {color:#000099;}
.phyab {color:black;}
.phyabo {color:black;}
.phyo {color:#006600;}

.u {font-weight:normal;	font-style:italic;}
.m {font-weight:normal;	font-style:normal;}
.um {font-weight:normal; font-style:normal;}

/********************/





/********** TAXONOMY -- HOVER **********/

.hover-wrap {
	position: relative;
	display: inline-block;
}

.hover-box {
	position: absolute;
	bottom: 100%;
	left: 10px;
	background: #f1d59d;
	border: 1px solid black;
	border-radius:10px;
	color: black;
	padding: 8px 8px 8px 20px;
	white-space: nowrap;
	z-index: 10;
	font-style:normal;
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
	
	opacity: 0;
	visibility: hidden;
	transition: opacity 0s ease 0s, visibility 0s;
	pointer-events: none;
}

/* .hover-wrap:hover:not(:has(> details[open])) > .hover-box { */
.hover-wrap:hover > .hover-box {
	opacity: 1;
	visibility: visible;
	transition: opacity 1s ease 1s, visibility 0s linear 1s;
	pointer-events: auto;
}

.hover-wrap:has(.hover-wrap:hover) > .hover-box {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0s ease 0s, visibility 0s;
	pointer-events: none;
}

.hover-list {
	list-style-type:disc;
	list-style-position:outside;
	padding-left:0;
}

.hover-list ul,
.hover-list ul ul {
	margin-left: 0;
	padding-left: 1em;
	list-style-type:circle;
}

/********************/