@media (hover: none) {.MainContainer{padding-bottom: 15px;}} /* Only need spacing between header and images */

@media (hover: none) {.LaserImageGallery{padding-bottom: 60px;}} /* Needed because of funny vertical scrolling on iOS and Nexus 7, bottom of page gets cut off */

@media (max-width: 749px), (hover: none){
	main{padding: 0px 10px 0px 8px;}}

button{
	display: block;
	font-size: 16px;
	font-color: var(--fontColorPagePanel);
	width: 120px;
	height: 50px;
	margin: 12px auto 32px auto;
	border: solid 1px var(--colorMenuBarBackground);
	border-radius: 10px;
	background-color: var(--colorMenuBarBackground);
	outline: none;}

@media (hover: hover){
	button:hover{
		border-color: var(--colorMenuBarBackgroundHover); 
		background-color: var(--colorMenuBarBackgroundHover);
		cursor: pointer;
		outline: none;}}

.ModalContainer{
	display: none;
	z-index: 1;
	position: fixed;
	overflow: auto;
	padding: 20px 20px 0px 20px;
	background-color: white;}
	
@media (min-width: 948px){												/* Menu Bar & Page Panel */
	.ModalContainer{
		top:   77px;
		left: 180px;
		width: calc(100% - 180px);
		height: calc(100% - 77px);}}

@media (min-width: 750px) and (max-width: 947px){		/* Menu Bar */
	.ModalContainer{
		top:  77px;
		left:  0px;
		width: 100%;
		height: calc(100% - 77px);}}

@media (max-width: 749px){													/* Nothing */
	.ModalContainer{
		top:  45px;
		left:  0px;
		width: 100%;
		height: calc(100% - 45px);}}

.ModalContainer .ModalImage{
	display: block;
	max-width: 100%;
	max-height: calc(100% - 85px);
	margin: auto;}

.ModalContainer button{width: 80px; height: 40px;}

article + h1{     margin-top: 16px;}

article + article{margin-top: 24px;}

article{
	display: grid;
	grid-template-columns: 30px 1fr 50px;
	grid-template-rows: auto auto auto auto;
	align-items: center;
	border: solid 1px var(--colorMenuBarBackground);
	border-radius: 20px;
	overflow: hidden;
	margin-top: 12px;
	line-height: 1.40em;}
	
article.LaserImage{
	grid-template-columns: 30px 1fr min-content 50px;}

article.LaserImage details{
	margin-bottom: -22px;}	

article img{
	grid-column: -3 / -2;
	grid-row: 1 / 4;
	width: 100px;
	padding: 10px 10px 10px 0px;
	justify-self: center;}

article img:hover{
	cursor: pointer;
	opacity: 0.7;
}

.Number{
	grid-column: 1 / 2;
	grid-row: 1 / 4;
	display: grid;
	height: 100%;
	align-items: center;
	justify-items: center;
	background-color: var(--colorMenuBarBackgroundHover);}

.PDF{
	grid-column: -2 / -1;
	grid-row: 1 / 4;
	display: grid;
	height: 100%;
	align-items: center;
	justify-items: center;
	background-color: var(--colorMenuBarBackgroundHover);}

.AbstractLeft{
	grid-column: 1 / 2;
	grid-row: 4 / 6;
	height: 100%;
	background-color: var(--colorMenuBarBackground);}

.AbstractRight{
	grid-column: -2 / -1;
	grid-row: 4 / 6;
	height: 100%;
	background-color: var(--colorMenuBarBackground);}

h4{
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	padding: 8px 10px 3px 10px;
	font-size: 16px;
	color: green;}

i{
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	padding: 3px 10px 3px 10px;}

.Publication{
	grid-column: 2 / 3;
	grid-row: 3 / 4;
	padding: 3px 10px 3px 10px;}

details{
	grid-column: 2 / -2;
	grid-row: 4 / 5;
	padding: 4px 10px 4px 10px;
	margin-bottom: -22px;
	/* color: var(--fontColorPagePanel); */
	background-color: var(--colorMenuBarBackground);}

summary{
	user-select: none;
	cursor: pointer;
	outline: none;}

summary:hover{}

details.NoAbstract summary{
	cursor: default;}
	
details.NoAbstract summary::-webkit-details-marker{
	color: transparent;}

#Laser{grid-area: laser;}
#Receiver{grid-area: receiver;}
#IEEE{grid-area: IEEE;}

.LaserImageGallery{
	display: grid;
	justify-content: center;
	justify-items: center;
	align-items: top;}

@media (min-width: 2253px){
	.LaserImageGallery{
		grid-template-columns: 693px    907px  463px;
		grid-template-areas:  "receiver laser  IEEE";}
}

@media (min-width: 1780px) and (max-width: 2252px){
	.LaserImageGallery{
		grid-template-columns: 877px 703px;
		grid-template-areas:  "laser receiver"
													"IEEE IEEE";
		grid-template-rows: 620px;}
#Laser{   margin-right: 10px;}
#Receiver{margin-left:  10px;}}

@media (max-width: 1779px){
	.LaserImageGallery{
		grid-template-columns: 1fr;
		grid-template-areas:  "IEEE"
													"laser"
													"receiver";}
	#IEEE{    max-width: calc(100% - 20px); margin-bottom: 20px;}
	#Laser{   max-width: calc(100% - 20px); margin-bottom: 20px;}
	#Receiver{max-width: calc(100% - 20px); margin-bottom: 20px;}}