html, body {
margin:				0px;
padding:			0px;
height:				100%;
border:				none
}

body {
background-color: 	#fff;
text-align: 		left;
}

a:link          	{color: #36f;}
a:visited       	{color: #36f;}
a:hover         	{color: #69f;}

a.red:link          {color: #c00;}
a.red:visited       {color: #c00;}
a.red:hover         {color: #f00;}

#adBar {
background-color: 	#eee;
}

td.subnav {
cursor: 			pointer;
}

#subsetMenu {
margin-bottom: 		30px;
}

.subsetMenu {
display: 			inline-block;
height: 			24px;
vertical-align: 	middle;
margin: 			4px;
padding: 			0 5px;
border: 			1px solid #69f;
border-radius: 		3px;
line-height: 		24px;
text-decoration: 	none;
color: 				#36f;
}

.subsetMenu:hover {
color: 				#36f;	
background-color: 	#d9e5ff;
}

.on {
background-color: 	#d9e5ff;
}

.subnav {
font-family:		varela round, arial rounded MT bold, arial, helvetica, san serif;
margin:				0px;
font-weight:		bold;
color:				#666;
}

.logo {
display: 			inline-block;
float: 				left;
margin:				4px 20px 4px 0px;
}

h1 {
font-family:		varela round, arial rounded MT bold, arial, helvetica, san serif;
font-size:			20px;
font-weight:		normal;
margin:				20px 0px;
color:				#39f;
}

.ad {
margin: 			10px 0px;
}

h1.title {
display: 			inline-block;
width:				580px;
white-space:		nowrap;
overflow:			hidden;
float: 				left;
font-family:		varela round, arial rounded MT bold, arial, helvetica, san serif;
font-size:			20px;
font-weight:		normal;
margin:				14px 0px 0px 20px;
color:				#39f;
}

h2 {
font-family:		varela round, arial rounded MT bold, arial, helvetica, san serif;
font-size:			22px;
font-weight:		normal;
color:				#36c;
margin:				10px 0px;
}

.text {
font-family:		'Poppins', arial, helvetica, san serif;
line-height: 		125%;
display:			block;
max-width:			438px;
max-height:			275px;
overflow:			hidden;
}

.pic {
height:				240px;
max-width:			430px;
overflow:			hidden;
}

.list-pic {
max-width:			178px;
max-height:			100px;
height:				auto;
width:				auto;
margin:				0px;
}

.prac-pic {
height:				150px;
max-width:			350px;
margin:				0px;
}

.match-pic {
max-height:			80px;
max-width:      	240px;
margin:				0px;
}

.vid {
width:				400px;
height:				225px; 
border:				0px;
frameborder:		0px;
margin:				0px;
}

.list-vid {
width:				178px;
height:				100px; 
border:				0px;
frameborder:		0px;
margin:				0px;
}

.prac-vid {
width:				267px;
height:				150px; 
border:				0px;
frameborder:		0px;
margin:				0px;
}

.match-vid {
width:				175px;
height:				100px; 
border:				0px;
frameborder:		0px;
margin:				0px 20px;
}

.mp3 {
width:				300px;
height:				60px;
}

.mp4 {
max-width:			400px;
max-height:			225px; 
}

.list-mp4 {
max-width:			178px;
max-height:			100px;
}

.prac-mp4 {
max-width:			267px;
max-height:			150px;
}

.match-mp4 {
max-width:			175px;
max-height:			100px;
}

.desmos {
width:				225px;
height:				225px; 
border:				0px;
frameborder:		0px;
margin:				0px;
}

.list-desmos {
height:				100px;
width:				100px;
margin:				0px;
}

.prac-desmos {
height:				150px;
width:				150px;
margin:				0px;
}

.match-desmos {
height:				80px;
width:				80px;
margin:				0px;
}

.mote {
width: 				400px;
height: 			220px;
border:				0px;
margin:				0px;
}

.list-mote {
height:				100px;
width:				100px;
border:				0px;
margin:				0px;
}

.prac-mote {
width: 				400px;
height: 			220px;
border:				0px;
margin:				0px;
}

.match-mote {
height:				80px;
width:				80px;
margin:				0px;
}

.button {
margin:				15px;
}

#cardCell {
vertical-align:		middle;
}

#mobileTitle {
display: 			none;
font-family:		varela round, arial rounded MT bold, arial, helvetica, san serif;
font-size:			16px;
color:				#666;
}

#mobileMenu {
display: 			none;
background-color:	#eee;
}

#mobileMenu P {
font-size:			20px;
}

#cardCount {
font-family:		varela round, arial rounded MT bold, arial, helvetica, san serif;
font-size:			14px;
color:				#999;
margin:				0px 10px;
}

.card {
padding:			0px 40px;
width:				438px;
height:				318px;
cursor: 			pointer;
}

#cardNum, #cardTot {
padding: 			3px;
}

#cardNum:hover {
color:  			#36f;
background-color: 	#d9e5ff;
border-radius: 		5px;
}

table.list {
border-collapse:	collapse;
}

table.list tr {
background-color: 	#fff;
}

table.list td {
font-family:		'Poppins', arial, helvetica, san serif;
font-size:			15px;
line-height: 		125%;
padding:			8px 0px 8px 12px;
border:				0px;
border-bottom:		1px solid #d5e3ee;
vertical-align:		top;
}

table.list td.num {
padding:			10px 4px 6px 4px;
color:				#333;
}

table.inner td {
padding:			0px;
border-bottom:		none;
}

.click {
cursor:				pointer;
}

.pracPrompt {
font-family:		'Poppins', arial, helvetica, san serif;
font-size:			22px;
line-height: 		125%;
color:				#666;
margin:				30px 0px 20px 0px;
}

.pracNote {
font-family:		'Poppins', arial, helvetica, san serif;
font-size:			14px;
line-height: 		125%;
color:				#666;
margin:				30px 0px 20px 0px;
}

.pracBox {
width: 				400px;
border: 			1px solid #36f;
box-shadow: 		0px 2px 10px #999999;
padding: 			10px;
font-family:		'Poppins', san serif;
font-size:			22px;
line-height: 		125%;
text-align: 		center;
color:				#666;
margin:				0px;
}

.pracAnswer {
font-family:		'Poppins', arial, helvetica, san serif;
font-size:			20px;
line-height: 		125%;
color:				#666;
margin:				20px 0px 0px 0px;
}

.pracResults {
font-family:		varela round, arial rounded MT bold, arial, helvetica, san serif;
font-size:			16px;
color:				#666;
margin:				10px 0px 0px 0px;
}

.matchBox {
display: 			inline-block;
vertical-align:		middle;
font-family:		'Poppins', arial, helvetica, san serif;
font-size:			18px;
line-height: 		125%;
max-width:      	280px;
border:         	0px solid #ccc;
box-shadow: 		0px 1px 6px #aaa;
border-radius:  	10px;
margin:				10px;
padding:			12px;
cursor:				pointer;
overflow: 			hidden;
animation-duration:	1.5s;
}

.matchBoxBlue {
box-shadow: 0px 0px 17px #36c;
}

@keyframes redFade {
from {box-shadow: 0px 0px 17px #f33;}
to {box-shadow: 0px 2px 5px #ccc;}
}

@keyframes greenFade {
from {box-shadow: 0px 0px 17px #090; opacity: 1;}
to {box-shadow: 0px 0px 15px #090; opacity: 0;}
}

.clock {
font-family:		varela round, arial rounded MT bold, arial, helvetica, san serif;
font-size:			26px;
color:				#36c;
}

table.quiz {
border-collapse:	collapse;
border-style:		hidden;
margin:				20px 0px 0px 0px;
}

table.quiz td {
padding:			10px 0px;
border-top:			1px solid #d5e3ee;
border-bottom:		1px solid #d5e3ee;
}

table.quiz td p {
font-family:		Arial, Helvetica, sans-serif;
font-size:			14px;
line-height:		100%;
color:				#666;
margin:				0px;
}

p, li {
font-family:		Arial, Helvetica, sans-serif;
font-size:			14px;
line-height:		150%;
}

ul {
margin:				0px;
}

.small {
font-size:			10px;
}

.indent {
margin-left:		40px;
}

.share {
font-family:		Arial, Helvetica, sans-serif;
font-size:			14px;
line-height:		150%;
margin:				15px;
}

.share:link         {color: #999;}
.share:visited      {color: #999;}
.share:hover        {color: #bbb;}

.shareOptions {
margin:				18px 0px;
}

.shareOptions td {
padding:			0px 10px;
}

.linkBox {
width: 				450px;
font-size: 			14px;
background-color: 	#eee;
border: 			1px solid #ccc;
padding: 			4px;
margin: 			0px;
}

.copyright {
font-family:		Arial, Helvetica, sans-serif;
font-size:			11px;
line-height:		normal;
color:				#36f;
margin:				10px;
}

#instructions {
font-family:		Arial, Helvetica, sans-serif;
font-size:			14px;
line-height:		100%;
height: 			30px;
background-color: 	#fffdd4;
}

#instructions a:link 	{color: #36f;}
#instructions a:visited {color: #36f;}
#instructions a:hover 	{color: #69f;}

body.dark-mode {
background-color: #222;
}

body.dark-mode p {
color: #999;
}

body.dark-mode #list tr {
background-color: #ccc;
}

@media print {
	.noPrint { display: none; }
	}
	
@media screen and (max-device-width: 700px) { 
	.noMobile { display: none; }
	.ad { margin: 0px; }
	#mobileMenu { display: table-row; }
	#mobileTitle { display: inline; }
	}