/* clear frame_styles declarations */

#overlay h1,
#overlay h2,
#overlay h3,
#overlay h4,
#overlay h5,
#overlay h6,
#overlay hr,
#overlay p,
#overlay ol,
#overlay ul{
	line-height: 1em;
	font-size:inherit;
	margin: 0;
}

#overlay{
	-webkit-backface-visibility:hidden;
	background-color:#eee;
	height:100%;
	width:100%;
	overflow:hidden;
	position:fixed;
	top:0;
	left:0;
	margin:0;
	padding:0;
	visibility:hidden;
	z-index: 99; /* steve */
}

#overlay .close, #overlayDebug{
	position:absolute;
    top:16px;
	cursor:pointer;
	z-index:999;
}
#overlay .close{ right:16px; }
#overlayDebug{ right:36px; display:none; visibility:hidden; }
		
#overlayContent{

	height:100%; width:100%; top:0; left:0;
	position:fixed;
}

#overlay .fcWrapper{
	position:relative;
	margin-top:7%;
	margin-left:auto;
	margin-right:auto;
	/* to get a 3x5 ratio, padding-bottom should be 60% of .flashcard width */
	padding-bottom:42%;
	height:0;
}
#overlay .flashcard {

	-webkit-backface-visibility:hidden;
	background-image:url(../Images/fcBackground.jpg);
	background-size:cover;
	position:absolute;
	top:0;
	/* left at (100%-width)/2 to be centered) */
	left:15%;
	margin-left:auto;
	margin-right:auto;
	height:100%;
	width:70%;
	text-align:center;
}
#overlay .cardText {

	-webkit-backface-visibility:hidden;
	margin-top:2em; /*18%;*/
	font-weight:bold;
	/*font-size:2em;*/
}
.cardHidden {

	-webkit-backface-visibility:hidden;
	display:none;
}
/* meant for phones in landscape */
@media all and (min-width: 600px){
	#overlay .cardText {

		font-size:2em;
		margin-top:15%;
	}
}