body{
	print-color-adjust: exact;
	-webkit-print-color-adjust: exact;
}

@page { 
    size: auto;
    margin: 1.5cm 1cm 2cm 1cm;  
	} 

/* SMALL.CSS ----------------------------------------- */
.button-wrapper, .split-button-wrapper{ display: none; }
.print-only{ display: block !important; }
.no-print, #header-wrapper{ display: none !important; }
#back-to-top{ display: none !important; }

#header-wrapper{
	background-color: #ccc;
	color:  #f00;
}

/* link formatting */ 
footer a::after { 
	content: " (" attr(href) ") "; }

footer a:link, footer a:visited {
	font-weight: normal;
	}	

a:link, a:visited {
	font-weight: normal;
	text-decoration: underline;
	}	
footer a:link, footer a:visited {
	font-weight: normal;
	text-decoration: none;
	}		

.top-message-wrapper.show{
	display: none;
	}

#inner-wrapper{ margin-top: 1em; }

h1{ 
	padding-top:  0;
	font-size: 1.9em; 
	}
h2 {
    font-size: 1.3em;
    padding: 1em 0 0.15em 0;
	}
ul { margin: 0.5em 0 0.5em 1em; }
li{	padding: .15em 0; }

hr{ font-size: 1.5em; }

hr.dotted{
	margin: 1em 0 0 0;
	}

/* RIGHT SIDE IMAGES */ 
.img-right-wrapper{
	padding: 0;
	grid-gap: 3em;
	grid-template-columns: 1.75fr 1fr;
	}
.img-right-wrapper.small{
	grid-template-columns: 5fr 1fr;
	}	
.img-right-wrapper.medium{
	grid-template-columns: 3.5fr 1fr;
	}
.img-right-wrapper>div:first-child{ order: initial; }
.img-right-wrapper>div:nth-child(2){ 
	align-self: center;
	order: initial; 
	}
.img-right-wrapper.small>div:nth-child(2), .img-right-wrapper.medium>div:nth-child(2) {
	width: 100%;
	}		
.img-right-wrapper.small img, .img-right-wrapper.medium img {
    width: 100%;
    justify-self: center;
	}
ul.inline-menu + .img-right-wrapper h2{
	padding-top: 0;
}
.img-center-wrapper img{
	text-align: center;
	width: 75%;
	}		

/* PLAY MENU PAGE ----------------- */
.img-right-play-menu-wrapper{ grid-template-columns: 5fr 1fr; }	
h1 + .img-right-play-menu-wrapper{ margin-top: 1em; }	
.img-right-play-menu-wrapper.field-notes{ grid-template-columns: 4fr 1fr; }			

/* FOOTER */
footer{
	padding-top: .5em;
	font-size: .9em;
	margin: 2em 0 0 0;
	}	
/* last link (About the game) isn't shown because of relative path. This removes last pipe */ 	
footer li:nth-last-child(2)::after{
	content: '';
	}

/* TOGGLE FROM SMALL.CSS ------------------------------ */
.toggle-box{
	background-color: transparent;
	border-radius: 0;
	padding: 1.5em 0 1em 0;
	}

.toggle-title.link{
	font-size: 1.3em;
	color: #000;
	}
.toggle-box>div.toggle-title:before {
	border-style: none;
	}
.toggle-box>.content-wrapper{
	display: block;
	}	

/* 2X ICON GRID FOR PLAY-MENU, TUTORIAL-INTRO --------------------- */
#icons-2x-wrapper{
	justify-content: center;
	grid-gap: 10%;
	}
#icons-2x-wrapper > div{
	width: 180px;
	}		


/* FIELD NOTES ---------------------------------- */
#field-notes .inline-menu, #field-notes #delete-wrapper{
	display: none;
	}
#field-notes .toggle-box{
	border: none;
	padding: 0;
	margin: 0;
	}	
#field-notes .toggle-box .content-wrapper{
	display: block;
	}
#field-notes #plankton{
	border-top: none;
	}	

/* species blocks */
#field-notes .species-wrapper {
	border-radius: 0;
	background-color: transparent;
	grid-template-columns: 1fr 5fr;
	margin: 1em 0;
	padding: 1em 0;
	border-bottom: dotted 2px #ccc;
	page-break-inside: avoid;
	}
#field-notes .species-wrapper img {
	border-radius: var(--main-border-radius);
	grid-row: 1 / 3;
	}
#field-notes .heading{
	padding: 0 0 0 1em;
	background-color: transparent;
	color: #000;
	border-radius: 0;
	}	
#field-notes .info{
	grid-column: unset;
	padding: 0 0 0 1em;
	}
#field-notes .toggle-title{
	display: none;
	}
#field-notes .content-wrapper {
	padding-bottom: 0;
	}
#field-notes .content-wrapper p{
	padding: .25em 0;
	}	 	

/* LEARN FEATURES ----------------------------------*/ 
/* images ------------------------------ */
#learn-features #feature-image-wrapper img{
	max-width: 300px;
	}	
#learn-features .split-button-wrapper, #learn-features .button-wrapper{
	display: none;
	}		

/* GAME.CSS --------------------------------------- */
#ab-key-toggle-wrapper, #tree-key-toggle-wrapper {
	page-break-inside: avoid;
	}

/* Image complete screen */ 
#img-feedback-wrapper{
	display: flex;
	justify-content: left;
    grid-gap: 2em;
	margin-top: 2em;
	}
#img-feedback-wrapper > div{
	display: block;
	}
#img-feedback-wrapper > div > img {
	height: 10em;
	width: auto;
	}
	
#continue-section {
	display: none;
	}


/* Tree Key */
#tree-key{
	width: 100%;
	margin: 0 auto;
	}
/* level (nodes) */
#tree-key .level-wrapper {
	margin: 0 6em;
	}
#tree-key .level-wrapper.left {
	margin: 0 12em 0 0;
	}
#tree-key .level-wrapper.right {
	margin: 0 0 0 12em;
	}

#tree-key .level-wrapper > div{
	padding: 1em .75em .75em .75em;
	margin: 0 1em;
	}	
#tree-key .line-wrapper.center {
    margin: 0 16em;
	}
#tree-key .line-wrapper.left {
	margin: 0 21.5em 0 11em;
	}
#tree-key .line-wrapper.right {
	margin: 0 11em 0 21.5em;
	}
/* Adjusting for 2 right blocks in a row */
#tree-key .level-wrapper.right ~ .line-wrapper.right:not(.leaf){ margin: 0 7em 0 25em; } 
#tree-key .level-wrapper.left ~ .line-wrapper.left:not(.leaf){ margin: 0 25em 0 7em; } 	
/* Adjusting outline color */ 
#tree-key .level-wrapper > div{ outline-color: #ccc; }
#tree-key .level-wrapper > div.empty{ outline-color: transparent; }	


/* AB Key */
#ab-key {
	column-count: 2;
	} 
#ab-key .block{
	break-inside: avoid;
    outline-offset: -3px;
	}	
#ab-key .option {
    display: grid;
    grid-template-columns: 1.25fr 5fr 6fr
	}
#ab-key .option > div{
	padding: .75em .5em .6em .5em;
	display: flex;
  	align-items: center;
	}

/* Game Complete Screen */
#score-wrapper {
    width: 50%;
    margin: 2em 0 3em 0;
	}		
/* Species identified images */ 
#species-identified-wrapper{
	grid-template-columns: repeat(5, 1fr);
	}	
#species-identified-wrapper img{
	border-radius: 1em;
	}
#species-identified-wrapper > div > div {
	line-height: 1.1em;
    padding-bottom: 0.25em;
	}
#print-section{
	display: none;
	}