ul
{
	margin-top:5px;
	margin-bottom:5px;
}

button
{
	cursor:pointer;
}

button:focus
{
	outline:none;
}


#lesson-wrapper
{
	width:975px;
	margin:auto;
	margin-top:10px;
	margin-bottom:20px;
	
	position:relative;
	background-color:white;
	
	border:1px solid #ccc;
	border-radius:5px;

	min-height:550px;
	padding-top:30px;
	
	border-bottom-width:2px;
	
	font-family:Arial;
	font-size:15px;
}

.fraction
{
	display:inline-block;
	line-height:15px;
	font-size:12px;
	vertical-align:middle;
	text-align:center;
}

.fraction .num
{
	padding:0px 3px;
}

.fraction .den
{
	padding:0px 3px;
	border-top:1px solid black;
}


.lightbox-wrapper
{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	min-height:100%;
	background-color:rgba(0,0,0,0.8);
	
	display:none;
	line-height:25px;
}

.lightbox
{
	
	background:white;
	padding:20px;
	border-radius:5px;
	border:2px solid #eee;
	width:700px;
	margin:auto;
	margin-top:50px;
	font-size:15px;
	margin-bottom:50px;
}

.lightbox-button-wrapper
{
	padding:15px 10px;
	border-radius:30px 0px 0px 30px;
	position:absolute;
	right:-1px;
	top:-95px;
	
	background:#EEE;
	border:1px solid #ccc;
	border-bottom-width:2px;
	
	
}

.lightbox-button-wrapper .capsule-button
{
	background:#D776B5;
	border-color:#AB5E90;
	
}

.lightbox-button-wrapper .header
{
	font-size:12px;
	text-align:center;
	margin-bottom:5px;
	color:#D776B5;
}

.feedback
{
	padding:30px;
	background-color:white;
	line-height:25px;
	position:relative;
	width:280px;
	display:none;
}

.column
{
	display:inline-block;
	
	vertical-align:middle;
}

.column:nth-of-type(1)
{
	margin-right:20px;
	
}



.capsule-button
{
	border:none;
	background-color:/*blue*/#58BAF0;
	border-bottom:2px solid;
	border-color:/*dark-blue*/#4694BF;
	
	
	padding:5px 10px;
	border-radius:100px;
	color:white;
	font-weight:bold;
	font-size:17px;
	vertical-align:middle;
	cursor:pointer;
	text-shadow:0px 1px rgba(0,0,0,0.2);
}

.capsule-button.selected
{
	background-color:/*orange*/#E79924;
	border-color:/*dark-orange*/#B8791C;
}



.help-container .audio-button
{
	background-color:/*blue*/#58BAF0;
	background-image:url('img/icon-listen.png');
	width:44px;
	height:30px;
	border-radius:100px;
	border-bottom:2px solid/*dark-blue*/#4694BF;
}

.help-container
{
	position:absolute;
	top:10px;
	right:-5px;
	
}

.help-container .audio-button.playing
{
	background-color:/*orange*/#E79924;
	border-color:/*dark-orange*/#B8791C;
	background-image:url('img/icon-listen.png');
}

.capsule-button.audio-toggle-button
{
	padding:0px;
	font-size:0px;
	line-height:0px;
	width:40px;
	height:30px;
	background-image:url('img/icon-speaker-toggle.png');
}



.capsule-button.audio-toggle-button.off
{
	background-position:0px -30px;
}

.capsule-button.icon
{
	padding:0px;
	font-size:0px;
	line-height:0px;
}

.capsule-button.square
{
	border-radius:5px;
}

.capsule-button.audio
{
	margin-right:10px;
}

.capsule-button.float
{
	display:inline-block;
}

.capsule-button.incorrect
{
	background-color:/*red*/#DB7662;
	border-color:/*dark-red*/#AE5E4E;
}


.capsule-button:disabled
{
	background-color:#ccc;
	border-color:#bbb;
	
}

.capsule-button.disabled
{
	background-color:#ccc !important;
	border-color:#bbb !important;
	cursor:auto !important;
	pointer-events:none !important;
}

.capsule-button.reset-button
{
	background-color:/*red*/#DB7662;
	border-color:/*dark-red*/#AE5E4E;
}

.feedback-wrapper, .check-wrapper, .start-wrapper
{
	text-align:center;
	min-width:50px;
	position:absolute;
	padding:10px;
	background-color:#eee;
	
	position:absolute;
	right:-5px;
	bottom:10px;
	border:1px solid #ccc;
	border-bottom-width:2px;
	//box-shadow:0px 1px 2px rgba(0,0,0,0.2);
	display:none;
	border-top-left-radius:30px;
	border-bottom-left-radius:30px;
}

.nav-wrapper
{
	
	min-width:50px;
	position:absolute;
	padding:5px;
	background-color:#eee;
	
	position:absolute;
	left:-5px;
	bottom:10px;
	border:1px solid #ccc;
	border-bottom-width:2px;
	//box-shadow:0px 1px 2px rgba(0,0,0,0.2);
	
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
	white-space:nowrap;
	cursor:pointer;
}

.nav-wrapper .page-prefix
{
	display:inline-block;
}

.nav-wrapper .expand-button
{
	color:#38C7D7;
	text-shadow:0px 1px #1C8993;
	background:none;
	border:none;
	padding:5px 0px;
}

.nav-wrapper .subway button
{
	border:none;
	border-radius:5px;
	background-color:#fff;
	border-bottom:1px solid #999;
	font-size:inherit;
	color:#999;
	padding:5px 10px;
	margin:0px 2px;
	
}


.nav-wrapper .summary
{
	display:inline-block;
}

.nav-wrapper .subway
{
	display:none;
	white-space:nowrap;
}

.nav-wrapper .subway button.selected
{
	background:none;
	border:none;
	color:inherit;
	text-shadow:inherit;
	
	border-top:1px solid /*dark-blue*/#4694BF;
	background-color:/*blue*/#58BAF0;
	text-shadow:0px 1px /*dark-blue*/#4694BF;
	color:white;
	
	position:relative;
}

.nav-wrapper .summary .page-reference
{
	padding:5px 10px;

	display:inline-block;
	background-color:/*blue*/#58BAF0;
	border-bottom:1px solid rgba(0,0,0,0);
	border-top:1px solid /*dark-blue*/#4694BF;
	border-radius:5px;
	
	color:white;
	text-shadow:0px 1px /*dark-blue*/#4694BF;
	position:relative;
	margin:0px 2px;
}


.check-wrapper .check-button, .start-wrapper .start-button
{
	position:relative;
}

.feedback-text
{
	position:absolute;
	bottom:10px;
	right:0px;
	display:none;

	
	
	border-bottom:1px solid /*pale-dark-yellow*/#FFE19A;
	padding:5px 120px 5px 10px;
	max-width:675px;
	background-color:/*pale-yellow*/#FFEDC2;

	line-height:25px;
	border-radius:10px 0px 0px 10px;
	border-bottom-width:2px;
}

.feedback-text.unmodified
{
	//background-color:#ffdd99;
}

.feedback-text.correct
{
	padding-right:75px;
	background-color:/*pale-green*/#E5EFC0 !important;
	border-color:/*pale-dark-green*/#D4E497;
}

.feedback-text.incorrect
{
	padding-right:75px;
	background-color:/*pale-yellow*/#FFEDC2;
	border-color:/*pale-dark-yellow*/#FFE19A;
}

.feedback-text.bonus
{
	padding-right:140px;
	background-color:/*pale-yellow*/#FFEDC2;
	border-color:/*pale-dark-yellow*/#FFE19A;
}

.feedback-wrapper .feedback-marker.incorrect
{
	color:/*red*/#DB7662;
	background:none;
	border:none;
}

.feedback-wrapper .feedback-marker
{
	font-size:40px;
	padding:0px;
	border:0px solid #27A8B4;
	font-weight:regular;
	border-radius:5px;
	color:/*green*/#A8C92E;
	text-shadow:0px -1px rgba(0,0,0,0.5);
	
}

.hint-panel
{
	background-color:#eee;
	border:1px solid #ccc;
	position:absolute;
	padding:10px;
	min-width:300px;
	box-shadow:0px 1px 5px rgba(0,0,0,0.3);
	display:none;
	cursor:pointer;
	z-index:1000;
	line-height:25px;
	border-radius:10px;
	font-size:15px;
	text-shadow:none;
	color:black;
	text-align:left;
}

.hint-wrapper .hint-panel
{
	top:-20px;
	left:40px;
}

.help-wrapper .hint-panel
{
	//right:85px;
	position:relative;
	left:0px;
	top:0px;
	min-width:400px;
}



.help-wrapper
{
	padding:10px;
	background-color:#eee;
	margin-bottom:5px;
	position:relative;
	//right:-10px;
	//top:10px;
	
	border:1px solid #ccc;
	border-bottom-width:2px;
	//box-shadow:0px 1px 2px rgba(0,0,0,0.2);
	border-radius:40px 0px 0px 40px;
}

.help-wrapper .help-content
{
	min-height:40px;
}

.help-wrapper .help-content .help
{
	display:none;
	padding:10px;
	border-radius:5px;
	//background-color:/*pale-blue*/#CDEAFB;
}

.help-wrapper.type-tool .help
{
	background-color:/*pale-green*/#E5EFC0;
}

.help-wrapper.type-stem .help
{
	background-color:/*pale-yellow*/#FFEDC2;
}

.help-wrapper.type-pathway .help
{
	background-color:/*pale-red*/#F4D6D0;
}

.help-wrapper.type-funfact .help
{
	background-color:/*pale-violet*/#EAD9F6;
}

.help-wrapper .help-button
{
	font-size:0px;
	padding:0px;
	position:relative;	
}

.help-wrapper.type-tool .help-button, .capsule-button.type-tool
{
	background-color:/*green*/#A8C92E;
	border-color:/*dark-green*/#85A024;
}

.help-wrapper.type-stem .help-button, .capsule-button.type-stem
{
	background-color:/*yellow*/#FFC235;
	border-color:/*dark-yellow*/#CB9A2A;
}

.help-wrapper.type-pathway .help-button, .capsule-button.type-pathway
{
	background-color:/*red*/#DB7662;
	border-color:/*dark-red*/#AE5E4E;
}

.help-wrapper.type-funfact .help-button, .capsule-button.type-funfact
{
	background-color:/*pink*/#D776B5;
	border-color:/*dark-pink*/#AB5E90;
}


.help-wrapper .help-button.highlight
{
	
	background-color:/*yellow*/#FFC235;
	border-color:/*dark-yellow*/#CB9A2A;
}

.help-nav-wrapper
{
	padding:10px;
	background-color:#eee;
	position:absolute;
	right:-5px;
	bottom:15px;
	border:1px solid #ccc;
	box-shadow:0px 1px 2px rgba(0,0,0,0.2);
	white-space:nowrap;
	display:none;
}

.help-nav-wrapper .help-nav-button
{
	
	width:20px;
	height:20px;

	border-radius:10px;
	margin-left:5px;
	margin-right:5px;
	margin-top:5px;
	background-color:#ccc;
	border:none;
	border-top:1px solid #999;
	display:inline-block;
	
}

.help-nav-wrapper .help-nav-button.active
{
	background-color:#DE9B37;
}

.disable-user-select
{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.line
{
	display:inline-block;
	height:50px;
}

.feedback-text .line{ height:20px; }

.stem-wrapper
{
	padding-left:30px;
	line-height:25px;
	padding-bottom:10px;
}

.part-nav-wrapper
{
	margin-top:0px;
	margin-bottom:10px;
	margin-left:0px;
	padding-left:30px;
	border-radius:0px 10px 10px 0px;
	overflow:hidden;
	display:inline-block;
	background-color:#eee;
	border:1px solid #ccc;
	border-left:none;
	//box-shadow:0px 1px 2px rgba(0,0,0,0.5);
}

.part-nav-wrapper .part
{
	background-color:white;
	border-bottom:1px solid #bbb;
	border-top:1px solid rgba(0,0,0,0);
	display:inline-block;
	padding:5px 10px;
	border-radius:5px;
	margin:5px;
	margin-left:0px;
	cursor:pointer;
}

.part-nav-wrapper .part.disabled
{
	color:#bbb;
	cursor:default;
	background-color:#f9f9f9;
	pointer-events:none;
}

.part-nav-wrapper .part.selected
{
	border-bottom:none;
	color:white;
	background-color:/*blue*/#58BAF0;
	border-top:1px solid /*dark-blue*/#4694BF;
	border-bottom:1px solid rgba(0,0,0,0);
	text-shadow:0px 1px /*dark-blue*/#4694BF;
}

.question-wrapper
{
	padding-left:30px;
	padding-right:60px;
	padding-bottom:85px;
	padding-top:0px;
	line-height:25px;
}

.lesson-question
{
	position:relative;
	vertical-align:middle;	
}

.number-line
{
	display:inline-block;
	line-height:15px;
}


.lesson-question-number
{
	position:absolute;
	left:-34px;
	top:10px;
	width:25px;
	font-weight:bold;
	color:black;
	padding:8px 0px 8px 8px;
	background-color:rgba(255,255,255,0.4);
	border-radius:10px 0px 0px 10px;	
}

.hint-wrapper
{
	position:absolute;
	top:0px;
	left:0px;
	font-size:14px;
	
}

.hint-wrapper button
{
	border:none;
	position:absolute;
	top:-15px;
	left:-15px;
	color:white;
	width:30px;
	height:30px;
	background-color:/*red*/#DB7662;
	border-bottom:2px solid /*dark-red*/#AE5E4E;
	border-radius:100px;
}

.narration-button
{
	vertical-align:middle;
	margin-right:10px;
	cursor:pointer;
	display:inline-block;
	
}

.block
{
	margin-bottom:10px;
	
}

#lesson-scroller
{
	overflow-y:auto;
	-webkit-overflow-scrolling: touch;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0x;
	padding:0px;
	margin:0px;
}

#lesson-wrapper svg rect, #lesson-wrapper svg line
{
	fill:/*indigo*/rgba(146,140,222,0.5);
	stroke-width:1;
	stroke:/*indigo*/#928CDE;
}

#lesson-wrapper svg circle
{
	fill:/*indigo*/#928CDE;
	
}

svg text
{
	text-anchor:middle;
}

input[type="radio"]
{
	display:none;
	
}

input[type=radio] + label
{
	cursor:pointer;
}

input[type=radio] + label:before
{
	
	content:" ";  
	display: inline-block;  
	width: 20px;  
	height: 20px;
	background-color:#eee;
	border-radius:100px;
	top:8px;
	margin-right:5px;
	border:5px solid #ddd;
	box-shadow:0px 1px 0px #999, inset 0px 1px #999;
}

input[type=radio]:checked + label:before
{
	background-color:#18656C;
	
}



select
{
	border-radius:5px;
	font-size:15px;
	
	padding:5px;
	cursor:pointer;
	border-bottom:2px solid #bbb;
	background-color:#eee;
	border-color:#bbb;
}


.text
{
	vertical-align:middle;
}

.question-wrapper .incorrect
{
	border-color:/*red*/#DB7662 !important;
}

.question-wrapper .correct
{
	background-color:/*pale-green*/#E5EFC0 !important;
	border-color:/*pale-dark-green*/#D4E497 !important;
}

.question-wrapper .resolved
{
	background-color:/*pale-yellow*/#FFEDC2 !important;
	border-color:/*pale-dark-yellow*/#FFE19A !important;
}

.recap
{
	padding:5px 10px;
	border-radius:10px;
	color:black;
	vertical-align:middle;
	
	display:inline-block;
	border:2px dashed /*blue*/#58BAF0;
	
}