/*----------------------------------------------------------------------------------*/
/* Exercise Content Page Classes							                        */
/*----------------------------------------------------------------------------------*/
.wrapper .left .content .page .topiclist, .wrapper .left .content .page .exerciselist
{
	width: 100%;
	float: left;
	margin: 30px 0px 30px 0px;
	padding: 0px 0px 0px 0px;
}



.wrapper .left .content .page .topiclist h1, .wrapper .left .content .page .exerciselist h1
{
	width: 100%;
	float: left;
	margin: 20px 0px 0px 0px;
	padding: 5px 10px 5px 10px;
	font-size: 22px;
	color: #000000;
	font-weight: 500;
	background-color: #ffffff;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom: 1px solid #cccccc;
}


.wrapper .left .content .page .topiclist nav, .wrapper .left .content .page .exerciselist nav
{
	width: 100%;
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.wrapper .left .content .page .topiclist nav .row, .wrapper .left .content .page .exerciselist nav .row
{
	width: 100%;
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: #ffffff;
}

.wrapper .left .content .page .topiclist nav .row a, .wrapper .left .content .page .exerciselist nav .row a
{
	width: 100%;
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;	
}

.wrapper .left .content .page .topiclist nav .row a h1, .wrapper .left .content .page .exerciselist nav .row a h1
{
	width: 100%;
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 5px 10px 5px 10px;
	font-size: 22px;
	color: #000000;
	font-weight: 500;
	border-bottom: 1px solid #cccccc;
}



/*----------------------------------------------------------------------------------*/
/* Exercise Display Classes									                        */
/*----------------------------------------------------------------------------------*/
.wrapper .left .content .exercise
{
	width: calc(100% - 20px);
	float: left;	
	margin: 20px 10px 30px 10px;
	padding: 0px 0px 10px 0px;	
}


.wrapper .left .content .exercise .top
{
	width: 100%;
	float: left;
	border-bottom: 5px solid #cccccc;
}

.wrapper .left .content .exercise .top h1
{
	width: calc(100% - 10px);
	float: left;
	margin: 10px 0px 10px 0px;
	padding: 0px 0px 0px 5px;
	font-size: 22px;
	color: #000000;
	font-weight: 500;
	border-left: 5px solid #000000;
}


.wrapper .left .content .exercise .top p
{
	width: 100%;
	float: left;
	font-size: 18px;
	font-weight: 500;
	color: #5a5d60;
}




/*----------------------------------------------------------------------------------*/
/* Exercise Scorecard Classes									                    */
/*----------------------------------------------------------------------------------*/
.wrapper .left .content .exercise .scorecard 
{  	
	width: 200px;
	height: 0px;
	float: left;	
	margin-top: 40px;	
	margin-left: -webkit-calc(50% - 100px);
	margin-left: -moz-calc(50% - 100px);
	margin-left: calc(50% - 100px);
	
}

.wrapper .left .content .exercise .scorecard  #svg 
{
  	width: 200px;
  	height: 0px;
	position: absolute;
	
	margin: 0px 0px 0px 0px;
	z-index: 10;
	
	
}

.wrapper .left .content .exercise .scorecard  #percent {
  
  height: 0px;
  width: 200px;  
  font-size: 43px;
  text-align: center;
  vertical-align: middle;
  line-height: 42px;
  color: #3da08d;  
  float: left;
  position: absolute;
	
  margin: 80px 0px 0px 0px;
  z-index: 15;
}


/*----------------------------------------------------------------------------------*/
/* Exercise Question Classes										                */
/*----------------------------------------------------------------------------------*/

.wrapper .left .content .exercise .questions
{	
	width: 100%;
	float: left;
}



.wrapper .left .content .exercise .questions .multipage
{	
	width: 0px;
	float: left;
	overflow-x: hidden;
}

.wrapper .left .content .exercise .questions .multipage .multipage-container
{	
	width: 100%;
	height: auto;
	float: left;	
	white-space: nowrap;
	display: inline-block;
	left: 0;
	margin-left: 0;
	vertical-align: top;
}



.wrapper .left .content .exercise .questions .questionrow
{
	width: -webkit-calc(100%);
	width: -moz-calc(100%);
	width: calc(100%);
	float: left;	
	padding: 5px 0px 5px 0px;
	margin: 20px 0px 0px 0px;
	background-color: #ffffff;
	border-radius: 5px;		
}


.wrapper .left .content .exercise .questions .multipage .multipage-container .questionrow
{
	top: 0;
	width: 100%;
	display: inline-block;
	float: none;
	white-space: normal;
	vertical-align: top;
}


.wrapper .left .content .exercise .questions .questionrow .main, .wrapper .left .content .exercise .questions .questionrow .main .questionrow .main
{
	width: -webkit-calc(100% - 0px);
	width: -moz-calc(100% - 0px);
	width: calc(100% - 0px);
	float: left;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;	
	text-decoration: none;	
}


.wrapper .left .content .exercise .questions .questionrow .main h1
{
	width: -webkit-calc(30px);
	width: -moz-calc(30px);
	width: calc(30px);
	float: left;	
	font-weight: normal;
	text-align: right;
	font-size: 40px;
	color: #5a5d60;
	text-decoration: none;	
	padding: 5px 5px 5px 5px;		
	margin: 0px 0px 0px 10px;
}


.wrapper .left .content .exercise .questions .questionrow .main p
{
	width: -webkit-calc(100% - 60px);
	width: -moz-calc(100% - 60px);
	width: calc(100% - 60px);
	float: right;	
	font-weight: normal;
	text-align: left;
	font-size: 20px;
	color: #5a5d60;
	text-decoration: none;	
	padding: 5px 5px 5px 5px;		
	margin: 12px 10px 0px 0px;	
}



.wrapper .left .content .exercise .questions .questionrow .main p .field
{	
	background-color: #ffffff;	
	-webkit-appearance: none;
	
	min-width: 100px;
	width: 100px;
	transition: width 0.25s;
	
	border-top: 0px solid;
	border-left: 0px solid;
	border-right: 0px solid;	
	border-bottom: 3px solid #bec1c4;
	border-radius: 0px;	
	
	font-weight: normal;
	font-size: 18px;	
	color: #5a5d60;
	text-align: center;
	
	padding: 2px 5px 2px 5px;
}

.wrapper .left .content .exercise .questions .questionrow .main p .field:focus
{
	outline: none;
	border-color: #03b1fc;
}


.wrapper .left .content .exercise .questions .questionrow .main p #incorrect
{
	border-bottom: 3px solid #ba4623;
}

.wrapper .left .content .exercise .questions .questionrow .main p #correct
{
	border-bottom: 3px solid #23ba85;
}



.wrapper .left .content .exercise .questions .questionrow .main .audio
{
	width: -webkit-calc(100% - 60px);
	width: -moz-calc(100% - 60px);
	width: calc(100% - 60px);
	float: right;	
	font-weight: normal;
	text-align: left;
	font-size: 20px;
	color: #5a5d60;
	text-decoration: none;	
	padding: 5px 5px 5px 5px;		
	margin: 12px 10px 0px 0px;	
}


.wrapper .left .content .exercise .questions .questionrow .main .audio .player
{
	width: -webkit-calc(100%);
	width: -moz-calc(100%);
	width: calc(100%);
	float: left;	
	padding: 0px 0px 0px 0px;		
	margin: 0px 0px 0px 0px;
	border-radius: 3px;
}



.wrapper .left .content .exercise .questions .exercisefooter
{
	width: 100%;
	float: left;
	margin: 30px 0px 30px 0px;
	overflow-x: hidden;
}


/* For Child Questions */
.wrapper .left .content .exercise .questions .questionrow .main .questionrow
{
	width: -webkit-calc(100% - 50px);
	width: -moz-calc(100% - 50px);
	width: calc(100% - 50px);
	float: left;	
	padding: 5px 0px 5px 0px;
	margin: 0px 0px 0px 50px;
	background-color: #ffffff;
	border-radius: 5px;		
}


.wrapper .left .content .exercise .questions .questionrow .main .questionrow .main h1
{
	width: -webkit-calc(30px);
	width: -moz-calc(30px);
	width: calc(30px);
	float: left;	
	font-weight: normal;
	text-align: right;
	font-size: 30px;
	color: #5a5d60;
	text-decoration: none;	
	padding: 5px 5px 5px 5px;		
	margin: 0px 0px 0px 10px;
}

.wrapper .left .content .exercise .questions .questionrow .main .questionrow .main p
{
	width: -webkit-calc(100% - 60px);
	width: -moz-calc(100% - 60px);
	width: calc(100% - 60px);
	float: right;	
	font-weight: normal;
	text-align: left;
	font-size: 20px;
	color: #5a5d60;
	text-decoration: none;	
	padding: 5px 5px 5px 5px;		
	margin: 6px 10px 0px 0px;	
}



/*----------------------------------------------------------------------------------*/
/* Flashcards: 														                */
/*----------------------------------------------------------------------------------*/
.wrapper .left .content .exercise .questions .flashcardrow
{
	width: -webkit-calc(100%);
	width: -moz-calc(100%);
	width: calc(100%);
	float: left;	
	padding: 5px 0px 5px 0px;
	margin: 20px 0px 0px 0px;
	background-color: #ffffff;
	border-radius: 5px;		
}


.wrapper .left .content .exercise .questions .multipage .multipage-container .flashcardrow
{
	top: 0;
	width: 100%;
	display: inline-block;
	float: none;
	white-space: normal;
	vertical-align: top;
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}


.wrapper .left .content .exercise .questions .flashcardrow .main
{
	width: -webkit-calc(100% - 0px);
	width: -moz-calc(100% - 0px);
	width: calc(100% - 0px);
	float: left;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;	
	text-decoration: none;	
}

.wrapper .left .content .exercise .questions .flashcardrow .main .word-native
{
	width: 100%;
	float: left;
}

.wrapper .left .content .exercise .questions .flashcardrow .main .alphabet-native
{
	width: 100%;
	float: left;
}



.wrapper .left .content .exercise .questions .flashcardrow .main h1
{
	width: -webkit-calc(20px);
	width: -moz-calc(20px);
	width: calc(20px);
	float: left;	
	font-weight: normal;
	text-align: center;
	font-size: 40px;
	color: #5a5d60;
	text-decoration: none;	
	padding: 5px 5px 5px 5px;		
	margin: 0px 10px 0px 10px;
}




.wrapper .left .content .exercise .questions .flashcardrow .main .audio
{
	width: -webkit-calc(100% - 0px);
	width: -moz-calc(100% - 0px);
	width: calc(100% - 0px);
	height: 70px;
	min-height: 70px;
	float: left;	
	font-weight: normal;
	text-align: left;
	font-size: 20px;
	color: #5a5d60;
	text-decoration: none;	
	padding: 0px 0px 0px 0px;		
	margin: 0px 0px 0px 0px;	
}


.wrapper .left .content .exercise .questions .flashcardrow .main .audio .player
{
	width: calc(100% - 20px);
	float: left;	
	padding: 0px 0px 0px 0px;		
	margin: 0px 10px 0px 10px;
	border-radius: 3px;
}


.wrapper .left .content .exercise .questions .multipage .multipage-container .flashcardrow .main
{
	width: 100%;
	min-height: 250px;
	float: left;
}

.wrapper .left .content .exercise .questions .multipage .multipage-container .flashcardrow .main .word-native
{
	width: 100%;
	float: left;
}

.wrapper .left .content .exercise .questions .multipage .multipage-container .flashcardrow .main .alphabet-native
{
	width: 100%;
	float: left;
}



.wrapper .left .content .exercise .questions .multipage .multipage-container .flashcardrow .main h1
{	
	width: calc(100% - 20px);
	float: left;	
	font-weight: normal;
	text-align: center;
	font-size: 40px;
	color: #5a5d60;
	text-decoration: none;	
	padding: 5px 5px 5px 5px;		
	margin: 0px 10px 0px 10px;
	border-left: 0px;
}


.wrapper .left .content .exercise .questions .multipage .multipage-container .flashcardrow .main .word-native h1
{	
	width: calc(100% - 20px);
	float: left;	
	font-weight: normal;
	text-align: center;
	font-size: 40px;
	color: #3a9cff;
	text-decoration: none;	
	padding: 10px 5px 10px 5px;			
	margin: 20px 10px 10px 10px;
	border-left: 0px;
}


.wrapper .left .content .exercise .questions .multipage .multipage-container .flashcardrow .main .alphabet-native h1
{	
	width: calc(100% - 20px);
	float: left;	
	font-weight: normal;
	text-align: center;
	
	text-decoration: none;	
	padding: 10px 5px 10px 5px;		
	margin: 20px 10px 20px 10px;
	border-left: 0px;
	
	font-size: 82px;
	color: #3a9cff;	
	border-left: 0px;
	line-height: 85px;
}


.wrapper .left .content .exercise .questions .multipage .multipage-container .flashcardrow .main h2
{	
	width: calc(100% - 20px);
	float: left;	
	font-weight: normal;
	text-align: center;
	font-size: 30px;
	color: #5a5d60;
	text-decoration: none;	
	padding: 5px 5px 5px 5px;		
	margin: 0px 10px 0px 10px;
	border-left: 0px;
}

.wrapper .left .content .exercise .questions .multipage .multipage-container .flashcardrow .main p
{	
	width: calc(100% - 20px);
	float: left;	
	font-weight: normal;
	text-align: center;
	font-size: 20px;
	color: #5a5d60;
	text-decoration: none;	
	padding: 5px 5px 5px 5px;		
	margin: 0px 10px 0px 10px;
}


.wrapper .left .content .exercise .questions .multipage .multipage-container .flashcardrow .answers
{
	width: calc(100% - 20px);
	float: left;
	margin: 10px 10px 10px 10px;
}

.wrapper .left .content .exercise .questions .multipage .multipage-container .flashcardrow .answers button
{
	-webkit-appearance: none;
	width: 100%;
	float: left;
	margin: 5px 0px 5px 0px;
	background-color: #cccccc;
	border: 0px solid;
	border-radius: 5px;	
	font-weight: normal;
	font-size: 20px;	
	color: #ffffff;
	padding: 12px 0px 12px 0px;
}


.wrapper .left .content .exercise .questions .multipage .multipage-container .flashcardrow .answers #off
{
	background-color: #cccccc;
}

.wrapper .left .content .exercise .questions .multipage .multipage-container .flashcardrow .answers #on
{
	background-color: #3a9cff;
}

.wrapper .left .content .exercise .questions .multipage .multipage-container .flashcardrow .answers #correct
{
	background-color: #23ba85;
}

.wrapper .left .content .exercise .questions .multipage .multipage-container .flashcardrow .answers #incorrect
{
	background-color: #ba4623;
}



.wrapper .left .content .exercise .questions .multipage .multipage-container .flashcardrow .answers p .field
{	
	background-color: #ffffff;	
	-webkit-appearance: none;
	
	min-width: 100px;
	width: 100px;
	transition: width 0.25s;
	
	border-top: 0px solid;
	border-left: 0px solid;
	border-right: 0px solid;	
	border-bottom: 3px solid #bec1c4;
	border-radius: 0px;	
	
	font-weight: normal;
	font-size: 18px;	
	color: #5a5d60;
	text-align: center;
	
	padding: 2px 5px 2px 5px;
}

.wrapper .left .content .exercise .questions .multipage .multipage-container .flashcardrow .answers p .field:focus
{
	outline: none;
	border-color: #03b1fc;
}


.wrapper .left .content .exercise .questions .multipage .multipage-container .flashcardrow .answers p #incorrect
{
	background-color: #ffffff;
	border-bottom: 3px solid #ba4623;
}

.wrapper .left .content .exercise .questions .multipage .multipage-container .flashcardrow .answers p #correct
{
	background-color: #ffffff;
	border-bottom: 3px solid #23ba85;
}




/*----------------------------------------------------------------------------------*/
/* Exercise Option Button Classes									                */
/*----------------------------------------------------------------------------------*/
.wrapper .left .content .exercise .questions .multipage .multipage-container .optionBtn, .wrapper .left .content .exercise .questions .optionBtn
{
	-webkit-appearance: none;
	width: 100%;
	float: left;
	margin: 5px 0px 5px 0px;
	background-color: #cccccc;
	border: 0px solid;
	border-radius: 5px;	
	font-weight: normal;
	font-size: 20px;	
	color: #ffffff;
	padding: 12px 0px 12px 0px;
}


.wrapper .left .content .exercise .questions .multipage .multipage-container #off, .wrapper .left .content .exercise .questions #off
{
	background-color: #cccccc;
}

.wrapper .left .content .exercise .questions .multipage .multipage-container #on, .wrapper .left .content .exercise .questions #on
{
	background-color: #3a9cff;
}

.wrapper .left .content .exercise .questions .multipage .multipage-container #correct, .wrapper .left .content .exercise .questions #correct
{
	background-color: #23ba85;
}

.wrapper .left .content .exercise .questions .multipage .multipage-container #incorrect, .wrapper .left .content .exercise .questions #incorrect
{
	background-color: #ba4623;
}




/*----------------------------------------------------------------------------------*/
/* Flashcard Grid:													                */
/*----------------------------------------------------------------------------------*/
.wrapper .left .content .exercise .questions .flashcardgridrow
{
	
	width: calc((100% / 5) - 10px);
	min-width: 100px;
	float: left;	
	padding: 5px 0px 5px 0px;
	margin: 5px 5px 5px 5px;
	background-color: #ffffff;
	border-radius: 5px;		
}




.wrapper .left .content .exercise .questions .flashcardgridrow .main
{	
	width: calc(100% - 0px);
	float: left;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;	
	text-decoration: none;	
}

.wrapper .left .content .exercise .questions .flashcardgridrow .main .word-native
{
	width: 100%;
	float: left;
}

.wrapper .left .content .exercise .questions .flashcardgridrow .main .alphabet-native
{
	width: 100%;
}

.wrapper .left .content .exercise .questions .flashcardgridrow .main h1
{	
	width: calc(100% - 10px);
	float: left;	
	font-weight: normal;
	text-align: center;
	font-size: 40px;
	color: #5a5d60;
	text-decoration: none;	
	padding: 5px 5px 5px 5px;		
	margin: 0px 0px 0px 0px;
}

.wrapper .left .content .exercise .questions .flashcardgridrow .main .answers
{
	width: 100%;
	float: left;
}

.wrapper .left .content .exercise .questions .flashcardgridrow .main .answers p
{
	width: 100%;
	float: left;
	margin: 0px;
	padding: 0px;
}

.wrapper .left .content .exercise .questions .flashcardgridrow .answers p .field
{	
	background-color: #ffffff;	
	-webkit-appearance: none;
	
	width: calc(100% - 10px);
	min-width: calc(100% - 10px);
	transition: width 0.25s;
	
	border-top: 0px solid;
	border-left: 0px solid;
	border-right: 0px solid;	
	border-bottom: 3px solid #bec1c4;
	border-radius: 3px;	
	
	font-weight: normal;
	font-size: 24px;	
	color: #5a5d60;
	text-align: center;
	
	margin: 0px 5px 0px 5px;
	padding: 2px 5px 2px 5px;
}

.wrapper .left .content .exercise .questions .flashcardgridrow .answers p .field:focus
{
	outline: none;
	border-color: #03b1fc;
}



.wrapper .left .content .exercise .questions .flashcardgridrow #correct
{
	border-bottom-color: #23ba85;
	color: #ffffff;
}

.wrapper .left .content .exercise .questions .flashcardgridrow #incorrect
{
	border-bottom-color: #ba4623;
	color: #ffffff;
}



/*----------------------------------------------------------------------------------*/
/* Exercise Control Button Classes									                */
/*----------------------------------------------------------------------------------*/
.wrapper .left .content .exercise .reroll
{
	-webkit-appearance: none;
	float: left;
	width: 100%;
	margin: 10px 0px 10px 0px;
	background-color: #3a9cff;
	border: 0px solid;
	border-radius: 5px;	
	font-weight: normal;
	font-size: 20px;	
	color: #ffffff;
	padding: 9px 0px 9px 0px;
}

.wrapper .left .content .exercise .reroll:hover
{
	background-color: #2b94ff;
	cursor: pointer;
}


.wrapper .left .content .exercise .questions .exercisefooter .submit
{
	-webkit-appearance: none;
	float: left;
	width: 100%;
	margin: 20px 0px 0px 0px;
	background-color: #3a9cff;
	border: 0px solid;
	border-radius: 5px;
	font-weight: normal;
	font-size: 20px;	
	color: #ffffff;
	padding: 9px 0px 9px 0px;
}

.wrapper .left .content .exercise .questions .exercisefooter .submit:hover
{
	background-color: #2b94ff;
	cursor: pointer;
}



.wrapper .left .content .exercise .questions .exercisefooter .prevPage
{
	-webkit-appearance: none;
	float: left;
	width: 150px;
	margin: 20px 0px 0px 0px;
	background-color: #3a9cff;
	border: 0px solid;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	font-weight: normal;
	font-size: 20px;	
	color: #ffffff;
	padding: 9px 0px 9px 0px;
}

.wrapper .left .content .exercise .questions .exercisefooter .nextPage
{
	-webkit-appearance: none;
	float: right;
	width: 150px;
	margin: 20px 0px 0px 0px;
	background-color: #3a9cff;
	border: 0px solid;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;	
	font-weight: normal;
	font-size: 20px;	
	color: #ffffff;
	padding: 9px 0px 9px 0px;
}



.wrapper .left .content .exercise .questions .exercisefooter .submit-container
{
	width: 100%;
	height: 39px;
	float: left;
	margin: 20px 0px 20px 0px;
	overflow: hidden;	
}

.wrapper .left .content .exercise .questions .exercisefooter .submit-container .submitPage
{
	-webkit-appearance: none;
	float: left;
	width: 100%;
	margin: 39px 0px 0px 0px;
	background-color: #3a9cff;
	border: 0px solid;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;	
	font-weight: normal;
	font-size: 20px;	
	color: #ffffff;
	padding: 9px 0px 9px 0px;
}




.wrapper .left .content .exercise .questions .exercisefooter .prevPage:hover, .wrapper .left .content .exercise .questions .exercisefooter .nextPage:hover
{
	background-color: #2b94ff;
	cursor: pointer;
}





/*----------------------------------------------------------------------------------*/
/* Split Layout Breakpoints For Large Screens										*/
/* 48em = 768px, 62em = 992px                                                       */
/* Breaking mobile after common vertical tablets ~62em                              */
/*----------------------------------------------------------------------------------*/

@media (min-width: 62em) 
{

	.wrapper .left .content .page .topiclist h1
	{		
		font-size: 28px;		
	}	
	
	.wrapper .left .content .page .exerciselist h1
	{		
		font-size: 28px;		
	}	
	
	.wrapper .left .content .exercise .top h1
	{		
		font-size: 38px;		
	}
	
	.wrapper .left .content .exercise .top p
	{		
		font-size: 22px;		
	}
}