/* css for the labels on the tissue check boxes */

body {background-color: black;}

@media screen and (orientation: portrait) {

	.grid 	{
		display: grid;
		height: 100vh;
		width: 100vw;
		grid-template-areas : 	
								"header"
								"apologies"
								"apologies"
								"apologies"
								"footer";
		
							
		grid-template-rows: 5% 44% 23% 23% 5%;
			
		}
	
	#header { grid-area : header;}
	#footer {grid-area : footer;}
	
	#t1_tissue_filter { display : none;}
	#pd_tissue_filter { display : none;}
	#t2_tissue_filter { display : none;}
	#combined_checkboxes { display : none;}
	#didactic { display : none;}
	#axis_toggle {display: none;}
	#choose_TR_TE {display: none;}
		#central_contrast_theorem {display:none;}
	
	#apologies { grid-area : apologies;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;}
			
}
	
		
@media screen and (orientation: landscape) {
		
.grid  	
	{
		display: grid;
		height: 100vh;
		width: 100vw;
		grid-template-areas : 	
								"header header header header"
								"graphs	graphs graphs graphs"
								"tissues axis choose_TR_TE central_contrast_theorem"
								"didactic didactic didactic didactic"
								"footer footer footer footer";
								
		grid-template-columns: 25% 25% 25% 25%;						
		grid-template-rows: 5% 25% 20% 45% 5%;
					
	}
		

	
	#graphs {
		grid-area : graphs;
				background-color : white;
		}

	#combined_checkboxes {	
		grid-area : tissues;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color : white;
		}
	
	#axis_toggle {		
		grid-area : axis;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color : white;
		}
						
	#central_contrast_theorem {
		grid-area : central_contrast_theorem;
		display: flex;
		justify-content: center;
		align-items: center;	
		background-color : white;
		}
		
	#choose_TR_TE {
	
		grid-area : choose_TR_TE;
				display: flex;
		justify-content: center;
		align-items: center;
		background-color : white;
		}

		
	#didactic {
		grid-area : didactic;
		}
		
		
#TR_slider {
 width: 200px;
 height: 20px;
 display: block;
 	}

#TE_slider {
 width: 200px;
 height: 20px;
 display: block;
 	}
 	
 	
#content_wrapper {

	box-sizing: border-box;
	border-top: solid;
	border-bottom: solid;
	position: relative;

	height : 45vh;
/* 
	margin-top: 0%;
	margin-left: 0%;
	margin-right: 0%;
	margin-bottom: 5%;
 */
	overflow: hidden;
	

	/* Prevent native touch events on Windows */
	-ms-touch-action: none;

	/* Prevent the callout on tap-hold and text selection */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* Prevent text resize on orientation change, useful for web-apps */
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
	}
	

		
	#t1_tissue_filter {
		width: 33%;
		height : 25vh;
		display : inline-block;
		vertical-align: middle;}

	#pd_tissue_filter {
		width : 33%;
		height : 25vh;
		display : inline-block;
		vertical-align: middle;}
			
	#t2_tissue_filter {
		width : 33%;
		height : 25vh;	
		display : inline-block;
		vertical-align: middle;}
	


	.center_div {
		margin: auto;
		}
		
	#choose_TR {display:block;}
	#choose_TE {display:block;}
		
	#TR_textbox {
		width: 75px;
		display: flex;
		}

	#TE_textbox {
		width: 75px;
		display: flex;
		}


		
	#tissue_1_dropdown {
		display : block;}
	
	#tissue_2_dropdown {
		display : block;}
	
	#sequence_contrast {
		display : block;}
		
	#image_contrast {
		display : block;}	
		
		
		
		
	.table_title {
	padding-bottom:5px;
	}


	#content {
		position: absolute;
		padding-top:10px;
		padding-right:25px;
		padding-left:25px;
		padding-bottom: 10px;
		background: #fff;
		color: #000000;
		font-family: Thonburi, Arial, sans-serif;
    font-size  :   125% ;

		/* Prevent elements to be highlighted on tap */
		-webkit-tap-highlight-color: rgba(0,0,0,0);

		/* Put the scroller into the HW Compositing layer right from the start */
		-webkit-transform: translateZ(0);
		-moz-transform: translateZ(0);
		-ms-transform: translateZ(0);
		-o-transform: translateZ(0);
		transform: translateZ(0);
	}
	
	#apologies{ display: none;}
	
	
}


#header {
	grid-area: header;
	display : flex;
	align-items: center;
	justify-content : center;}
	
	
	
#footer {
	grid-area: footer;
	display : flex;
	align-items: center;

	}