.yellowBackground{
	/* background-color:#f1e482; */
}
.secdTurkeyLightBackground{
	/* background-color:#97C9CB; */
}
.secdLimeaBackground{
	background-color:#92bb3e;
}
.defaultBgColor{
	background-color:#ffffff;
}

body{
	font-family:lato, arial, sans;
	background-color:#F0F0F0;
	margin:0px;
	margin-left:20px;
	margin-right:20px;
	font-size:1.2em;
	line-height:1.5em;
}
@media screen and (max-width: 500px) {
    body{
		font-size:1.0em;
		line-height:1.3em;
	}
}
h1{
	color:#005b72;
	font-size:1.3em;
	margin-top:20px;
	font-weight:bold;
}
h2{
	font-size:1.1em;
	font-weight:bold;
}
#mainContent{
	position:relative;
	max-width:800px;
	padding:0px 0% 0px 0%;
	margin:10px auto auto auto;
	border:0px red dotted;
}
#whatToDoArrow{
	border:0px red solid;
	position:absolute;
	top:15px;
	left:0px;
}
.whatToDoQuestionBtn{
	padding:20px;
	background-color:white;
	border:3px #1c7991 solid;
}

#topBlueStrip{
	background-color:#1C7991;
	padding:0px;
	margin-left:-20px;
	margin-right:-20px;

}
#logosHolder{
	max-width:800px;
	margin:auto;
	display: block;

	border:0px red solid;
}	
#combinedLogo{
	width:100%;
	display: block;
	margin:auto;
	border:0px yellow dotted;
}
@media screen and (max-width: 900px) {
	#combinedLogo{
		width:90%;
		padding-left:5%;
		padding-right:5%;
	}
}
#rrcPolyFooter{
	border:0px red solid;
	text-align:center;
	margin:auto;
	margin-top:50px;
	margin-bottom:50px;
	max-width:800px;
	border-top:2px #005B72 solid; /* SECD Dark Blue */
	padding-top:10px;
}
#rrLogo{
	width:60%;
	margin-bottom:-10px; /* align with copyright */
	margin-right:20px;
	margin-top:5px;
}
@media screen and (max-width: 500px) {
    #rrLogo{
		width:100%;
	}
}

#tabHolder{
	width:100%;
	background-color:lime;
	margin-top:-10px;

	border:1px white solid;
}
@media screen and (max-width: 500px) {
    #tabHolder{
		width: calc(100% + 40px);
		margin-left:-20px;
	}
}

.tab{
	float:left;
	width:20%;
	height:35px;
	background-color:#1c7991; /* color of mb access banner */
	color:white;
	border:1px #1c7991 solid;
	border-right:1px white solid;
	font-weight:bold;
}
.currentTab{
	background-color:#F0F0F0;
	color:#1c7991;
	border:1px #1c7991 solid;
}
.tab:hover{
	background-color:white; /* color of mb access banner */
	color:#1c7991;
}
#meterTab{
	z-index:2;
}

#nameHolder{
	margin-top:-40px;
	color:#ED1847; /* rougenta */
	font-weight:bold;
}
/* aop acknowledgement of participation */

@media print
{    
    #closePrintViewButton
    {
        display: none !important;
    }
}
@media print {
  @page { margin: 0; }
  body { margin: 1.6cm; }
}
#aopHeading{
	font-size:1.6em;
}
#aopName{
	font-weight:bold;
}
#aopCourseName{
	font-weight:bold;
	font-size:1.5em;
	
}
#aopHolder{
	position:relative;
	border:0px blue solid;
	margin-top:60px;
	margin-bottom:60px;
	margin:auto;
	max-width:800px;
	display:none;

}
@media screen and (max-width: 400px) {
	#aopHeading{
	 font-size:1em;
	}
}
#closePrintViewButton{
	background-color:#1d7992;
	color:white;
}
#socialBtnHolder{
	border:0px red solid;
	overflow:auto;
}
#closephoneViewButton{
	display:none;
	margin-top:200px; /* push down to avoid screen capture */
	margin-bottom:50px;
}


#meterHolder{
	position:relative;
	margin-top:37px;
	border:0px red solid;
}
#meterHolderPageWithNoTabs{ /* discontinued? */
	position:relative;
	margin-top:-35px;
	border:0px red solid;
}
#theMeter{
	position:absolute;
	top:2%;
	right:2%;
	width:150px;
	height:150px;
	border:0px red solid;
}
.meterPics{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
}


#theMeterDisplayB{ /* used in topic & play area pages - pulls meter up into return to home/play button above */
	position:absolute;
	top:-18px;
	right:0px;
	width:125px;
	height:100px;
	border:0px blue solid;
	overflow:hidden;
	display:block;
}

@media screen and (max-width: 500px) {
	#theMeter{
		width:94.5px;
		height:75px;
	}
	#meterHolder{
		margin-left:auto;
		height:110px;
	}
	#nameHolder{
		font-size:1.2em;
	}

}
@media screen and (max-width: 500px) {
	#theMeterDisplayB{
		border:0px white solid;
		height:60px; /* kinda eyeballed... */

	}
	#theMeterDisplayB img{
		height:100px;
		width:90px; /* kinda eyeballed... */
	}

}





#nameEnteredInput{
	padding:6px;
	margin-top:10px;
	margin-bottom:10px;
}
.commonLookButton{
	border:.5px black solid;
	padding:7px;
	font-size:1.0em;
	width:100%;
	text-align:left;
	padding-left:80px;
	margin-bottom:20px;
	background-color:white;
}
.buttontargetBtn, .specialButton{ /* regular/main/default buttons */
	border:.5px black solid;
	padding:7px;
	font-size:1.0em;
	width:100%;
	text-align:left;
	padding-left:80px;

	background-color:white;
	/*
	-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.33);
	-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.33);
	box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.33);
	*/
}

.buttontargetBtn:focus{
	border:3px #ed1847 solid; /*  #ed1847 SECD rougenta  */
}

.commonLookButton:hover{
	background-color:#047079; /*  #00A3B5 SECD Turkey dark */	
	color:white;
}
.commonLookButton:focus{
	border:3px #ed1847 solid; /*  #ed1847 SECD rougenta  */
}



.halfButton{
	width:50%;
}

.standardBtn{ /* from secd interacts finalStructure-root/commonFiles/interactions.css */
	border:2px black solid;
	background-color:#005b71;
	color:white;
	height:30px;
	width:150px;
	text-align:center;
	margin-top:20px;
	display: inline-block; 
}
.standardBtn:focus{
	border:3px #ed1847 solid; /*  #ed1847 SECD rougenta  */
	background-color:#ED1847; /*  #ed1847 SECD rougenta  */
	color:white;
}


.linkToSECDButton{
	background-image: url("../sharedFiles/secdIcon.png"); 
	  background-repeat: no-repeat, repeat;
	background-position:20px center;
		height:100px;
	padding-left:140px;

}
.revisitButton{
	background-image: url("../sharedFiles/completeCheck.png"); 
	 background-repeat: no-repeat, repeat;
	background-position:20px center;
	height:60px;
	padding-left:80px;
}
.okCheckmarkButton{
	background-image: url("../sharedFiles/okCheckMark.png"); 
	background-repeat: no-repeat, repeat;
	background-position:20px center;
	height:60px;
	padding-left:80px;
}
.externalLinkButton{
	background-image: url("../sharedFiles/icon-openNewTab.png"); 
	background-repeat: no-repeat, repeat;
	background-position:20px center;
	height:60px;
	padding-left:80px;
}
.externalLinkButton:hover{
	background-color:#047079; /*  #00A3B5 SECD Turkey dark */	
	color:white;
}
.initalPromptButton{
	background-image: url("../sharedFiles/promptArrow.png"); 
	background-repeat: no-repeat, repeat;
	background-position:20px center;
	height:60px;
	padding-left:80px;
}
.playgroundButton, .returnToPlayground{
	background-image: url("../sharedFiles/playgroundIcon.png"); 
	background-repeat: no-repeat, repeat;
	background-position:20px center;
	height:60px;
	padding-left:80px;
}
.helpButton{
	background-image: url("../sharedFiles/questionMarkIconNewTab.png"); 
	background-repeat: no-repeat, repeat;
	background-position:20px center;
	height:60px;
	padding-left:80px;
}
.nextStepBtn{
	background-image: url("../sharedFiles/lockIcon.png"); /* stepIcon */
	background-repeat: no-repeat, repeat;
	background-position:20px center;
	height:60px;
	padding-left:80px;
}
.nextStepBtn:hover{
	background-color:#047079; /*  #00A3B5 SECD Turkey dark */	
	color:white;
}

.resetBtn{
	background-image: url("../sharedFiles/resetBtnIcon.png"); 
	background-repeat: no-repeat, repeat;
	background-position:20px center;
	height:60px;
	padding-left:80px;
}
.hiddenBlockLockBtn{
	background-image: url("../sharedFiles/lockIcon.png"); 
	background-repeat: no-repeat, repeat;
	background-position:20px center;
	height:60px;
	padding-left:80px;
	margin-bottom:-1px; /* pull up .hiddenBlock below */
}



.homeButtonTemplateB{
	background-image: url("../sharedFiles/homeIconRegBtn.png"); 
	background-repeat: no-repeat, repeat;
	background-position:20px center;
	height:60px;
	padding-left:80px;
}
button:focus{
	border:3px #ed1847 solid; /*  #ed1847 SECD rougenta  */
}




#submitUserName{
	background-image: url("../sharedFiles/promptArrow.png"); 
	background-repeat: no-repeat, repeat;
	background-position:20px center;
	height:60px;
	padding-left:80px;
}
#returnToPlayground{
	background-color:#1C7991;
	color:white;
	width:100%;
	height:80px;
	font-size:1.0em;
	margin-bottom:20px;
	margin-top:-18px;
	text-align:left;
	padding-left:80px;
}

#returnHomeBtn{
	background-image: url("../sharedFiles/homeIconRegBtn.png"); 
	background-repeat: no-repeat, repeat;
	background-position:20px center;
	height:80px;
	font-size:1.0em;
	width:100%;
	text-align:left;

	padding-left:80px;
	padding-bottom:10px;
	margin-top:-18px;
	color:white;
		background-color:#1C7991;
	border:0px yellow solid;	
}
@media screen and (max-width: 500px) {
    #returnToPlayground{
		font-size:.9em;
		line-height:1.1em;
		margin-top:-15px;
		margin-left:-20px;
		width:112%; /* NOT SURE WHY I GOT TO DO THIS???? */
		height:60px;
	}
	#returnHomeBtn{
		font-size:.9em;
		line-height:1.1em;
		margin-top:-15px;
		margin-left:-20px;
		width:112%; /* NOT SURE WHY I GOT TO DO THIS???? */
		height:60px;
	}	
	.buttontargetBtn, .specialButton{
		font-size:.8em;
		line-height:1.1em;
	}
}
#returnToPlayground:focus{
	border:3px #ed1847 solid; /*  #ed1847 SECD rougenta  */
}
#returnHomeBtn:hover{
	background-color:white;
	color:black;
	border:1px black solid;
}
#resetHomeBaseButton{
	background-image: url("../sharedFiles/resetIcon.png"); 
	background-repeat: no-repeat, repeat;
	background-position:20px center;
	height:60px;
	padding-left:80px;		
}

#printViewButton{
	background-image: url("../sharedFiles/printerIcon.png"); 
	background-repeat: no-repeat, repeat;
	background-position:20px center;
	height:60px;
	padding-left:80px;		
}
#phoneViewButton{
	background-image: url("../sharedFiles/phoneIcon.png"); 
	background-repeat: no-repeat, repeat;
	background-position:20px center;
	height:60px;
	padding-left:80px;		
}
#celebrateBlockText{
	font-size:1.3em;
	margin-top:-5px;
	margin-bottom:5px;
}
.secdSignUpBtn{
	border:3px #f0f0f0 solid;
}

.fullwidth{
	width:100%;
}

.comment{
	background-color:yellow;
}
#banner{
	width:100%;
}
@media screen and (max-width: 800px) {
	#banner{ /* trial & errored this to fit full width w no gaps */
		margin-top:-10px;
		margin-left:-20px;
		width: calc(100% + 40px);
	}
}
@media screen and (max-width: 500px) {
	#celebrateBlockText{
		font-size:1em;
	}
	.buttontargetBtn{
		font-size:.9em;
	}
}

.faqQuestion{
	font-weight:bold;
	font-style:italic;
}
.faqAnswer{
	margin-left:20px;
}
.assignedReadingPrompt{
	color:red;
	font-weight:bold;
}
.smallPrint{
	font-size:.5em;
}
.keyMessage{
	padding:20px;
	border-top:1px #005b72 solid;
	border-bottom:1px #005b72 solid;
	font-weight:bold;

}

/* are your ready quizzes on topic pages */
#areYouReadyQuestionArea{
	background-color:white;
	padding-left:20px;
	padding-right:15px;
	font-size:1.1em;
	border:1px black solid;
	margin-bottom:20px;
}
#areYouReadyQuestion{
	border:0px black dotted;
	padding: 10px 10px 5px 10px;
	border-radius:10px;
	margin-top:10px;
	margin-bottom:20px;

}
.areYouReadyOptionBtn, .areYouReadyResetBtn{
	border:2px solid black;
	padding: 10px 10px 5px 30px;
	min-height:40px;
	margin-top:10px;
	margin-left:10px;
	width:95%;
	text-align:left;
	display:none;
		font-size:.9em;
}
.disableBtn{
	pointer-events:none;
}
.areYouReadyResetBtn{
	display:block;
}
.areYouReadyOptionBtn:hover {
  background-color: #97c9cb;
}
.areYouReadyResetBtn:hover {
  background-color: #97c9cb;
}

#areYouReadyNextQuestionBtn{
	border:0px white solid;
	color:white;
	font-weight:bold;
	font-size:1.0em;
	padding: 10px 10px 5px 30px;
	min-height:35px;
	line-height:35px;
	text-align:left;
	margin-top:10px;
	margin-left:10px;
	background-color:#005B72;
	background-repeat:no-repeat;
	background-position:right center; 
	width:95%;
	display:block;	
}
#areYouReadyFeedbackArea{
	border-left:5px #005b72 solid;
	padding: 10px 10px 10px 10px;
	min-height:20px;
	margin-top:10px;
	margin-left:10px;

	display:none;
}
#areYouReadyScoreArea{
	padding: 10px 10px 10px 10px;
	min-height:20px;
	margin-top:10px;
	display:block;
}
#areYouReadyNextQuestionBtn:focus {
	border:3px #ed1847 solid; /*  #ed1847 SECD rougenta  */
}
#areYouReadyResetBtn{
	border:0px white solid;
	color:white;
	font-weight:bold;
	font-size:1.0em;
	padding: 10px 10px 5px 30px;
	min-height:35px;
	line-height:35px;
	text-align:left;
	margin-top:10px;
	margin-left:10px;
	background-color:#92BB3E;
	background-repeat:no-repeat;
	background-position:right center; 
	width:95%;
	display:block;
}

.floatLeft{
	float:left;
	margin-right:20px;
	margin-bottom:5px;	
	border:0px red solid;
	height: auto;
}

.smallFloatLeft{ /* watch for conflict on some play pages */
	width:100px;
	float:left;
	margin-right:20px;
}
.smallFloatRight{
	width:100px;
	float:right;
	margin-left:20px;
}

.imgHalfFloatRight{
	float:right;
	width:50%;
	margin-left:20px;
	margin-bottom:10px;
}
.imgHalfFloatLeft{
	float:left;
	width:50%;
	margin-right:20px;
	margin-bottom:10px;
}

.secdLinkNote{
	font-size:.6em;
	margin-top:-40px;
	text-align:right;
}

/* https://stackoverflow.com/questions/49765190/how-to-embed-vimeo-video-with-responsive-design​ */

.responsiveVideoContainer { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; overflow: hidden; 
  max-width: 100%; 
} 

.responsiveVideoContainer iframe, 
.responsiveVideoContainer object, 
.responsiveVideoContainer embed { 
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; 
  height: 100%; 
}
sup{
	font-size:.8em;
	font-style:italic;
}
.footnoteSection{
	border-top:1px black solid;
	width:75%;
		font-size:.8em;
	font-style:italic;
}
/* templateB */
#nameHolderTemplateB{
	font-size:.7em;
	text-align:right;
}
.hiddenBlock{
	border:1px black solid;
	padding:20px;
	display:none;
}
.nextStepBtn{
	display:block;
}
#blackLogoTemplateB{
	width:150px;
	margin-bottom:0px;
}
.smallFlexBtnHolder{
	display:flex;
	gap:10px;
	flex-wrap: wrap;
	justify-content: space-between;
	border:0px green solid;
}
.smallFlexBtn{
	flex:1 1 120px;
}
.smallFlexBtn:hover{
	background-color:#047079; /*  #00A3B5 SECD Turkey dark */	
	color:white;
}

#pageShortCutHolder{
	margin:auto;
	margin-top:20px;
	text-align:center;
	border:0px red solid;
}
#pageShortCutHolder button{
	background-color:white;
	border:.5px gray solid;
	padding:10px;
}
#pageShortCutHolder button:hover{
	background-color:#047079; /*  #00A3B5 SECD Turkey dark */	
	color:white;
}

.lockOpen, .linkOpen{
	background-color:lime;
}