body{
	min-width: 730px;
	}

/* SMALL.CSS --------------------------------------------------------- */ 	

/* INNER WRAPPER -------- */ 	
#inner-wrapper{
	max-width: 850px;
	margin: 3em auto 0 auto;
	}

/* HEADER ----------- */ 	
#header{
	max-width: 850px;
	margin: 0 auto;
	}	

h1{
	padding: 1em 0 .5em 0;
	}
li {
    padding: 0.25em 0;
}


/* RIGHT SIDE IMAGES */ 
.img-right-wrapper{
	padding: 0;
	grid-gap: 2em;
	grid-template-columns: 1.5fr 1fr;
	}
.img-right-wrapper.small{
	grid-template-columns: 4fr 1fr;
	}	
.img-right-wrapper.medium{
	grid-template-columns: 3fr 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;
	}		
/* center images */
.img-center-wrapper{
	padding: 1.5em 3em;
	}	 
.img-center-wrapper.small img{
	width: 70%;
	}		

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


/* TOGGLE BOXES ---------------------------------- */
.toggle-box{
	padding: 1.5em;
} 	

/* TOP MESSAGE BOXES ----------------- */ 
.top-message-wrapper{
	padding: 2em;
	border-radius: 1.5em;
	}

/* BACK TO TOP ------------------ */ 	
#back-to-top{
	margin-bottom: 1em;
	}	



/* PAGE SPECIFIC STYLES ----------------------------------------------------- */

/* HOME PAGE -------------------------------- */
#home-title{
	font-size: 5.5em;
	}
.banner{
	margin: 0 0 3em 0;
	padding: 0.75em;
	}
.home-icons > div{
	width: 200px;
	}

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

/* LEARN THE FEATURES ----------------------*/
/* Feedback ----------------- */
#learn-features .feedback{
	padding:  1.5em 2em;
	border-radius: 1.5em;
	background-color: #efefef;
	}
#learn-features #feature-image-wrapper img{
	outline: .5em solid transparent;
	outline-offset: -.5em;
	}	

/* FIELD NOTES ------------------------------ */
#field-notes .data-wrapper{
	display: flex;
	grid-gap: 1em;
	flex-wrap: wrap;
	align-items: flex-start;
	}
#field-notes .species-wrapper {
	max-width: 48%;
	margin: 0 0;
	}	


/* GAME --------------------------------------------- */

/* DRAGGABLE SPECIES IMAGE */
#drag-wrapper{
	width: 480px;
	height: 373px;
	}
img#drag-item{
	width: 480px;
	height: 373px;
	}

/* question screen */
#progress-feedback-wrapper{
	display: block;
	margin: 1em 0 1em 0;
	}
#progress-feedback-wrapper div:nth-child(2){
	margin:  0;
	}
#timer-wrapper{
	left: 0;
	}	

/* 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;
	}

/* 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; } 	

/* IMAGE COMPLETE SCREEN ----------- */
#correct-img-feedback-wrapper {
	padding-bottom: 0;
	}
#correct-img-feedback-wrapper > div {
	display: block;
    margin: 0;
    width: 50%;
	}

#wrong-img-feedback-wrapper {
	display: flex;
	justify-content: left;
    grid-gap: 2em;
	margin: 2em 0;
	}
#wrong-img-feedback-wrapper > div{
	display: block;
	margin: 0;
	}
#wrong-img-feedback-wrapper > div > img {
	height: 15em;
	width: auto;
	}

/* 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 input {
	width: 50%;
	}	

#score-wrapper {
    width: 50%;
    margin: 2em 0 3em 0;
	}