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

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

/* 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: 2.5em;
	grid-template-columns: 2.5fr 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;
	}

/* center images */
.img-center-wrapper{
	padding: 1em 3em;
	width: 75%;
	display: block;
	margin: 0 auto;
	page-break-inside: avoid;
	}	

/* slider and back/next buttons */
input.slider { display: none; }

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


/* CHARACTERS -------------------- */

.character-message-wrapper{
	margin: 1em auto;
	display: flex;
  	align-items: flex-start;
	grid-gap: 2.5em;
	}
.character-message-wrapper > img{
	width: 10rem;
  	height: 10rem;
	margin: 0;
	}		
.character-message-wrapper > div::before{
	content:url('../images/characters/textbox-triangle.svg');
	position: absolute;
	left: -33px;
	top: 70px;
	width: 35px;
	}
.character-message-wrapper > div{
	padding: 1.5em 2em;
	box-decoration-break
	}	
.section-links{ display: none; }

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


/* INTRODUCTION ---------- */
#pressure-example-wrapper{
	page-break-inside: avoid;
	}

/* ORIENTATAION ---------*/
.orientation-number-grid { 
	grid-gap: 1em .75em;
	align-items: center;
	}
.orientation-number-grid p{
	padding-bottom: 0;
	}	
.orientation-number-grid > div > div {
	font-size: 1.5em;
    width: 2em;
    height: 2em;
	line-height: 2.2em;
	}

/* CELL VIEWER --------*/
#cell-viewer {
	position: relative;
	margin: 0 7em;
	break-inside: avoid;
	}
#hotspot-wrapper{
	break-inside: avoid;
	}
#view-compare-menu {
   	grid-template-columns: repeat(4, 1fr);
	grid-gap: 0;
	break-inside: avoid;
	margin-bottom: .5em; 
	}
#view-compare-menu button{ border-radius: 0; }
#view-compare-menu button:first-child{ border-radius: .5em 0 0 .5em; }
#view-compare-menu button:last-child{ border-radius: 0 .5em .5em 0; }	

#view-compare #results-content { 
	grid-template-columns: repeat(2, 1fr); 
	grid-gap: 1em;
	}

#view-compare .card-wrapper { 
	break-inside: avoid; 
	margin-top: 2px;
	padding: 1em;
	}

#view-compare .close-card-icon, #view-compare .wiki-link { display: none; }

#view-compare img.microscopy-img { 
	margin: 0 auto .5em auto;
	width: 50%;
	display: block;
	}

.location img{ 
	float: right;
	width: 30%; 
	padding: 0 0 0 1em;
	}

/* CELL SIMULATOR --------*/
#simulation-controls-wrapper{ 
	padding: 0; 
	box-shadow: none;
	}
.slider-wrapper{ 
	margin: 0;
	padding: 0; 
	}
.slider-wrapper .label{ padding:0; } 

#cell-info-wrapper {
	grid-template-columns: 1fr 1fr;
	display: grid;
	margin-bottom: 2em;
	}

#cell-info-wrapper .stats{
	grid-gap: 0;
	grid-template-columns: 1fr 1fr;
	}	

#cell-info-wrapper .stats > div{
	color: #000;
	background-color: transparent;
	display: grid;
	text-align: left;
	padding: 0;
	}	

#cell-info-wrapper .stats.nucleus > div { background-color: transparent; }

#simulation-canvas-wrapper{ width: 50%; }


/* EXPLORE CELLS ----------- */
#growth-wrapper.toggle-box, #mutation-wrapper.toggle-box, #cancer-wrapper.toggle-box {
	margin-top: 0 0 .5em 0;
	padding: 0;
	}

/* Growth */
#growth-wrapper .slider-wrapper{
	display: none;
	}

#cell-growth-result-wrapper{
	width: 50%;
	display: block;
	margin: 1em auto 0 auto;
	}

/* Mutation, Caner */
#mutation-wrapper .thumb-wrapper > div > div {
	min-width: 5em;
	margin-top: 10px;
	}	
#mutation-wrapper .thumb-wrapper{
	padding: 0 3em;
    margin: 1em auto 2em auto;
    grid-template-columns: repeat(5, auto);
    page-break-inside: avoid;
	}

#cancer-wrapper .slider-control-wrapper, #cancer-wrapper .label {
	display: none;
	}

#mutation-wrapper .mutation-result, #cancer-result-wrapper{
	width: 50%;
	padding: 0;
	margin: 1em auto 0 auto;
	page-break-inside: avoid;
	}	

/* QUIZ ------------------------*/

/* intro page */
#quiz-menu #delete-high-score-wrapper{
	display: none;
	}

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

.grid-2x{
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-gap: 3em;
	}	
#quiz #cell-simulator{
	display: none;
	}
#quiz #card-wrapper{
	box-shadow: none;
	margin: 0;
	padding: 0;
	}	

/* Progress Feedback Wrapper */
#quiz #progress-wrapper{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	}
#quiz #progress-wrapper > div:nth-child(2){ margin:  0 0 0 auto; }

#quiz #progress-accuracy{ margin-top: 0; }	

#quiz #cell-selection-question-wrapper.cancer {
	grid-gap: 2em;
	grid-template-columns: 2fr 10fr;
	}

#quiz #cell-selection-question-wrapper.mutation {
    grid-gap: 2em;
    grid-template-columns: 2fr 9fr;
	}	

#quiz #cells-wrapper{
	width: 60%;
	margin: 2em auto 1em auto;
	}

/* Game complete ------------------------*/

#print-section, #continue-section{ display: none; }

#score-wrapper {
    width: 50%;
    margin: 2em 0 3em 0;
	}			
#detailed-results-wrapper{ margin:0; }
#detailed-results-wrapper .toggle-title{ display: none; } 
#detailed-results-wrapper #detailed-results{
	border:none;
	padding: 0;
	margin: 0;
	}
#detailed-results-wrapper.toggle-box .toggle-content-wrapper{ display:block; }

#detailed-results-wrapper .question-answer-wrapper { break-inside: avoid; }