/* intro.css */

p{ font-size:medium; }
body{ min-width:200px; }



#rearContainer, #frontContainer{ 
	max-width: 400px;
	margin-left: auto;  /* centers it horizontally */
	margin-right: auto;  /* centers it horizontally */
	margin-top:0;
	margin-bottom:0;
	padding:0; 
	padding-bottom:10px; 

	opacity:1;
	background-color: transparent;
	border-radius:15px;	

}

#rearContainer{ 
	position:relative; /* allows use of top:15px */
	top:15px;
	/*height:10%; /* random just to get some height */
  	z-index: 0;
	/* border: 1px dotted black; /* debug */
	/* background-color:beige; /* debug */
}
  
#frontContainer{  /* child of rearContainer */	
	position:absolute; /* absolute in relation to the rear container which renders first */
	top:0;
	opacity: 1.0; 
	transition: opacity 1s ease-in-out;
	box-shadow: 0 0 25px #ffffaa; /* halo effect */
	box-shadow: 0 0 25px #ddf; 
	-webkit-box-shadow:0 0 25px #ddf; 
	padding-bottom:10px;
  	z-index: 1;
	/* border: 1px dotted blue; /* debug */
	/* background-color:aqua; /* debug */
}


/* hover causes it to fade out */
#frontContainer:hover{   
	opacity: 0; 
}

#rearPanel, #frontPanel{	
	position:relative; 
	margin:0; 
	top:0;
}

#rearPanel{	
	max-width: 440px;
	min-width: 160px; 
  	z-index: 0;
	background-color:transparent;
	border-color:transparent; /* stops tiny movement of one border-width when fading out to rearPanel */
	box-shadow:none;  
}

#rearPanel .lastestData, #frontPanel .lastestData{   	
	float:right;
	padding-top:0;
	margin-right:3px;
}

#rearPanel .verText, #frontPanel .verText, #midPanel .verText{   	
	float:left;
	padding-top:0;
	margin-left:3px;
}

	
#frontPanel{	
	left:0;
	padding-bottom:25px;
  	z-index: 1;
	opacity: 1.0; 
	transition: opacity 1s ease-in-out;
	background-color:cornsilk; /* debug */ 
}




#frontPanel img, #midPanel img, #rearPanel img
{   border-width: 0px;
	border-style:none;
	border:0; 
	box-shadow:none; 
	
}

.tutorialMsg{
	margin:1em;
	padding:0 1em .5em 1em;  /* top. right, bottom, left */
	border-top-color:#888;
	border-left-color:#888;
	border-radius:5px;
	font-size:medium;
	font-weight:bold;
	margin-bottom:3px;	
}


.intro-img{   
	height:92px;
	width:284px;
}

#frontContainer .intro-img
{   
	border-style:none;
	border:0; 
	box-shadow:none; 
	opacity:1.0;
  	display: inline-block;
  	z-index: 1;
}


#bottomPanel
{ 
	opacity: 1;
	transition: opacity 1s ease-in-out;
	padding:20px;
	margin:0 auto;
	margin-top:15px;
	width:100%;
	background-color:cornsilk; /* debug */ 
}


#frontContainer #copyright, #frontContainer #copyright p, #frontContainer #copyright a
{   
	margin: 4% auto;  /* centers it horizontally */
	color:white;
	font-size:small; 
	text-align: center;
	border-style:none;
	background-color:transparent;
}



.rearButton, .frontButton{   
	margin-top:7px;
	padding-top:7px;
	padding-bottom:7px;
	border:thin black solid;
	border-radius:5px;
	font-weight:bold;
	font-size:medium;
	color:black;
	margin-left:10%;
	margin-right:10%;
}

.rearButton  /* fades into blue when hovered */
{   
	border:thin blue solid;
	color:blue;

}

.rearButton:hover, .frontButton:hover{   
	cursor:pointer;

]


#noscript, #copyright
{   
	margin:0px; 

}


/* remove halos from other css */
button
{   
	box-shadow: none;  /* none|h-shadow v-shadow blur spread color |inset|initial|inherit */
	box-shadow: 3px 3px 10px #eee;  /* none|h-shadow v-shadow blur spread color |inset|initial|inherit */

	border-style:none;
	border-top: 1px solid transparent; /* avoid motion when hover */
	border-left: 1px solid transparent;
	
	padding-top:5px;
	padding-bottom:5px;

}

button:hover, button:focus
{   
	border-top: 1px solid blue;
	border-left: 1px solid blue;

}

#noscript, #noscript p
{   
	font-size:medium;
	font-weight:bold;
	color:blue;
	background-color:orange;
	text-align:center;
	
}

#noscript p.title
{   
	font-size:large;
}



/* my iPhone 6 and other phones; use smaller image */
@media only screen 
	and (max-device-width: 767px) 
	and (orientation: portrait ) 
{   
	#rearContainer, #frontContainer{   
		max-width:100%;
		width:100%;
	  /* border:medium black dashed;  /*debug */
	}
	
	#frontPanel.roundedBox, #rearPanel.roundedBox{   
		max-width:100%;
		width:100%;
	  /* border:medium red dashed;  /*debug */

	}

	/* Inhibit fade-out so phone screen can be scrolled to read bottomPanel */
	#frontContainer:hover{   
		opacity: 1; 
	}

}


/* small windows */
@media only screen 
	and (max-width: 400px)
{   
/* ERROR HERE (CORRECTED) was not doing anything.  Check if needed
	#frontPanel { display:none;}
	#midPanel { display:block;}
*/
}