/* CSS Document */

html {
	touch-action: none; /* prevents IE mobile touch events from navigating away from the page */
}

body{
	overflow:hidden; /* no scrolling */
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; /* Prevents the user from selecting text */
}

.content_parent{
	/*
	The next 3 elements are necessary for the content div so that there's no scrolling:
	Sometimes, elements hidden outside of the frame and even though there is no scroll bars, it's still possible to scroll with the trackpad function on certain mouse
	This will ensure that it doens't happen.
	*/
	width:800px;
	height:600px;
	overflow:hidden; /* no scrolling */

	position:absolute;
	left:0px;
	top:0px;

	z-index: 0;/* <-- NEW: so that all of its children are within this layer - NVR '14 */
}

.content_child {
	position:absolute;
	left:0px;
	top:0px;
}

.background_image{
	position:absolute;
	left:0px;
	top:0px;
	xz-index:-1
}

.image_object{
	-webkit-tap-highlight-color:rgba(200,0,0,0); /* for ipad: disable the highlight */
	position:absolute;
	display: inline-block; /* To make non-img dom elements given this class to act more like an img - NVR */
		xwidth:152px;
		xheight:130px;
		xborder-style:solid;
		xborder-collapse:collapse;
		xborder-color: #4f1a1a;
		xborder-width: 1px;
		xbackground-color:#FFFFFF;
}
.mouse_default,
.mouse_default * {
	cursor: default;
}
.mouse_pointer,
.mouse_pointer * {
	cursor: pointer;
}
.mouse_audio:hover,
.mouse_audio *:hover {
	cursor: pointer; /*url("../images/speaker.cur ")*/
}
.mouse_audio::after {
	content: url("../images/click_for_audio_indicator.png");
	position: absolute;
	bottom: 3px;
	right: 3px;
	opacity: 1;
	pointer-events: none; /* TODO */
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
}
.mouse_audio__dark_background.mouse_audio::after { /* used in audiseg.js due to the dark background */
	background: rgba(251, 161, 255, 0.5);
	border-radius: 10px;
	border: solid 2px rgba(200, 149, 255, 0.5);
	/*background: rgba(194, 41, 248, 0.5);
	border-radius: 10px;
	border: solid 2px rgb(202, 38, 255);*/
}

.activity__is_busy .mouse_audio::after {
	opacity: 0;
}
/*
.mouse_audio:hover:after,
.mouse_audio:active:after {
	opacity: 1;
}*/

.invisible {
	color: transparent;
}
.vertical_center {
	/* Center the item vertically, requires its parent to have a set height */
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
.horizontal_center {
	/* Center the item horizontally, requires its parent to have a set width */
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}
.horizontal_and_vertical_center {
	/* Centering the item, requires its parent to have a set width */
	position: relative;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.transition_offset_ease { /* Used in capsule.js */
	-webkit-transition: top 1.5s ease, bottom 1.5s ease, left 1.5s ease, right 1.5s ease;
	-moz-transition: top 1.5s ease, bottom 1.5s ease, left 1.5s ease, right 1.5s ease;
	-ms-transition: top 1.5s ease, bottom 1.5s ease, left 1.5s ease, right 1.5s ease;
	-o-transition: top 1.5s ease, bottom 1.5s ease, left 1.5s ease, right 1.5s ease;
	transition: top 1.5s ease, bottom 1.5s ease, left 1.5s ease, right 1.5s ease;
}
.transition_offset_ease_fast {
	-webkit-transition: top 0.5s ease, bottom 0.5s ease, left 0.5s ease, right 0.5s ease;
	-moz-transition: top 0.5s ease, bottom 0.5s ease, left 0.5s ease, right 0.5s ease;
	-ms-transition: top 0.5s ease, bottom 0.5s ease, left 0.5s ease, right 0.5s ease;
	-o-transition: top 0.5s ease, bottom 0.5s ease, left 0.5s ease, right 0.5s ease;
	transition: top 0.5s ease, bottom 0.5s ease, left 0.5s ease, right 0.5s ease;
}
/*
.transition_offset_ease_10s {
	-webkit-transition: top 10s ease, bottom 10s ease, left 10s ease, right 10s ease;
	-moz-transition: top 10s ease, bottom 10s ease, left 10s ease, right 10s ease;
	-ms-transition: top 10s ease, bottom 10s ease, left 10s ease, right 10s ease;
	-o-transition: top 10s ease, bottom 10s ease, left 10s ease, right 10s ease;
	transition: top 10s ease, bottom 10s ease, left 10s ease, right 10s ease;
}*/
.transition_offset_ease_in {
	-webkit-transition: top 0.5s ease-in, bottom 0.5s ease-in, left 0.5s ease-in, right 0.5s ease-in;
	-moz-transition: top 0.5s ease-in, bottom 0.5s ease-in, left 0.5s ease-in, right 0.5s ease-in;
	-ms-transition: top 0.5s ease-in, bottom 0.5s ease-in, left 0.5s ease-in, right 0.5s ease-in;
	-o-transition: top 0.5s ease-in, bottom 0.5s ease-in, left 0.5s ease-in, right 0.5s ease-in;
	transition: top 0.5s ease-in, bottom 0.5s ease-in, left 0.5s ease-in, right 0.5s ease-in;
}
.transition_opacity {
	-webkit-transition: opacity 0.5s ease;
	-moz-transition: opacity 0.5s ease;
	-ms-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}
.transition_transform_1s { /* Used in capsules du sons as an extra effect on slide-in & slide-out*/
	-webkit-transition: -webkit-transform 1s ease;
	-moz-transition: -moz-transform 1s ease;
	-ms-transition: -ms-transform 1s ease;
	-o-transition: -o-transform 1s ease;
	transition: transform 1s ease;
}
.transition_transform_100ms { /* Used in capsules du sons as an extra effect on okay button appearing */
	-webkit-transition: -webkit-transform 0.1s ease-out;
	-moz-transition: -moz-transform 0.1s ease-out;
	-ms-transition: -ms-transform 0.1s ease-out;
	-o-transition: -o-transform 0.1s ease-out;
	transition: transform 0.1s ease-out;
}
.transform_rotate_0 { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);}
.transform_rotate_30 { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg);}
.transform_rotate__30 { -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg);}
.transform_collapse_height { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0);}

.loading_object{
	position:absolute;
	border-style:solid;
	border-collapse:collapse;
	border-color: #4f1a1a;
	border-width: 1px;
	background-color:#FFFFFF;

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

.loading_object_text{
	position:absolute;
		xwidth: 80px;
		xheight: 35px;
	text-align:center;
	font:Arial, Helvetica, sans-serif;
	font-family:Arial, Helvetica, sans-serif;
	color:#000000;
	font-size:14px;
	font-weight:bold;

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

.letter_object {
	position:absolute;
	white-space: nowrap; /* This is really important: make sure that the text in paragraphs will never wrap */
	font-family: 'AndikaRegular', Arial, sans-serif;
	line-height:160px; /* this lineHeight works with (more or less) a maximum font size of 120 */

		xborder-style:solid;
		xborder-collapse:collapse;
		xborder-color: #4f1a1a;
		xborder-width: 1px;
		xbackground-color:#FFFFFF;

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

.story_word_object {
	position:absolute;
	white-space:nowrap; /* This is really important: make sure that the text in paragraphs will never wrap */
	font-family: 'AndikaRegular', Arial, sans-serif;
		xborder-style:solid;
		xborder-collapse:collapse;
		xborder-color: #4f1a1a;
		xborder-width: 1px;
		xbackground-color:#FFFFFF;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.textbox_object {
	position:absolute;
	font-family: 'AndikaRegular', Arial, sans-serif;
		xline-height:100px; /* this lineHeight works with (more or less) a maximum font size of 120 */

		xborder-style:solid;
		xborder-collapse:collapse;
		xborder-color: #4f1a1a;
		xborder-width: 1px;
		xbackground-color:#FF0000;

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

.phoneme_object__syllable {
	padding-left: 1em;
	padding-right: 1em;
}
.phoneme_object__phoneme {
	color: #FFAA00;
	/*text-shadow: 1px 1px #000, 0 -1px #FFF;*/
	text-shadow: 1px 1px #F00, 0 -1px #BFF;
}
.phoneme_object__silent {
	/*font-size: 80%;*/
	opacity: 0.5;
	color: #FFFF00;
}

.load_word_test {
	position:absolute;
	white-space:nowrap; /* This is really important: make sure that the text in paragraphs will never wrap */
}

.tab_text {
	position:absolute;
	white-space:nowrap; /* This is really important: make sure that the text in paragraphs will never wrap */
	font-family: 'AndikaRegular', Arial, sans-serif;
	font-size:12px;
		xwidth: 30px;
		xheight: 20px;
		xbackground-color:#00FF33;
		xborder-style:solid;
		xborder-collapse:collapse;
		xborder-color: #4f1a1a;
		xborder-width: 1px;
}

.menu_bar_parent {
	position:absolute;
	left: 0px;
	top: 0px;
	width:800px;
}

.menu_bar_window {
	position:absolute;
	white-space:nowrap; /* This is really important: make sure that the text in paragraphs will never wrap */
}

.menu_bar_window_more {
	position:absolute;
	white-space:nowrap; /* This is really important: make sure that the text in paragraphs will never wrap */
	background-image:url('../images/menu_bar/arrow_menu_window.png');
	background-repeat:no-repeat;
	background-position:95% 50%;
}

.menu_bar_window_selected {
	position:absolute;
	white-space:nowrap; /* This is really important: make sure that the text in paragraphs will never wrap */
	background-image:url('../images/menu_bar/checkmark_menu_window.png');
	background-repeat:no-repeat;
	background-position:10px 50%;
}

.menu_bar {
	position:absolute;
	/*background-image:url('../images/menu_bar/texture.jpg');
	background-repeat:repeat-x;
	xbackground-color:#FFFFFF;*/
	/*background: rgba(228, 228, 228, 0.75);*/
	background: rgba(255,255,255,0.45);
	border-radius: 10px 0 0 10px;
	right:0;
	top:0;
	left:auto;
	height:28px;
	overflow:hidden;
	min-width:150px;
}

.menu_bar_text {
	position:absolute;
	right:0;
	top:0;
	left:auto;
	text-align:right;
	white-space:nowrap; /* This is really important: make sure that the text in paragraphs will never wrap */
	font-family: Arial;
	font-size:12px;
	line-height: 20px;
	padding: 4px;
	xmargin-right: 150px;
	xfont-weight:bold;
	xbackground-color:#FFFFFF;
}

/* NOTE: Student_space is now fixed position to prevent scrolling in Firefox */
.student_space_parent {
	position:fixed;
}
.student_space_login_box,
.student_space_login_form {
	position: absolute;
}


input.student_space_field {
	position:absolute;
	width: 88px;
}

input.student_space_field:hover {
	background:#F0F0F0;
}

.alert_box_title {
	position:absolute;
	font:Arial, Helvetica, sans-serif;
	font-family:Arial, Helvetica, sans-serif;
	color:#000000;
	font-size:18px;
	font-weight:bold;
}

.alert_box_message {
	position:absolute;
	font:Arial, Helvetica, sans-serif;
	font-family:Arial, Helvetica, sans-serif;
	color:#000000;
	font-size:14px;
}

.student_name_text {
	position:absolute;
	white-space:nowrap; /* This is really important: make sure that the text in paragraphs will never wrap */
	overflow:hidden;
	text-overflow: ellipsis;
	font-family: 'AndikaRegular', Arial, sans-serif;
	font-size:14px;
	line-height:16px; /* this lineHeight works with (more or less) a maximum font size of 120 */

		xborder-style:solid;
		xborder-collapse:collapse;
		xborder-color: #4f1a1a;
		xborder-width: 1px;
		xbackground-color:#FFFFFF;

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

.ipad_click_instruction_box {
	position:absolute;
	background-image:url('../images/buttons/ipad_click_to_continue.png');
	background-repeat:no-repeat;
}

.ipad_click_instruction_box {
	font-family: 'AndikaRegular', Arial, sans-serif;
	cursor:default;
}

/* student space bottom bar */
#id_student_space_border {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.35);
	outline: 1px solid rgba(75,130,152,0.7);
}

.number_object {
	font-weight: bold;
	font-family: monospace;
}

.page_number {
	font-size: 30px;
	color: #00AAAA;
	padding: 3px 10px;
	border: 3px dotted #AA00AA;
	border-radius: 15px;
}


/* specific to capsule.js -- newer browsers only, but this is only a small tweak to position; looks fine without - NVR */
.capsule_okay_button_transform_origin {
	-webkit-transform-origin: 0 63%;
	-moz-transform-origin: 0 63%;
	-ms-transform-origin: 0 63%;
	-o-transform-origin: 0 63%;
	transform-origin: 0 63%;
}

/* hi_freq.js --> sky */
.hi_freq__bg {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffcc00+0,f7d5ff+100 */
	background: #ffcc00; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2MwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmN2Q1ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #ffcc00 0%, #f7d5ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcc00), color-stop(100%,#f7d5ff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffcc00 0%,#f7d5ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffcc00 0%,#f7d5ff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffcc00 0%,#f7d5ff 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffcc00 0%,#f7d5ff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc00', endColorstr='#f7d5ff',GradientType=0 ); /* IE6-8 */
}

.over_border{
	border: 3px transparent dashed;
	margin: -3px; /* so that it is not pushed over by the border */
}
.over_border:hover{
	border: 3px white dashed;
	margin: -3px;
}
.over_border_answer{
	border: 3px white dashed;
	margin: -3px;
	cursor: default;
}

/* Spelling specific */
.spellingword__keyboard_background {
	border-radius: 18px;
	border: solid 3px rgb(25, 138, 150);
/* Gradient from http://www.colorzilla.com/gradient-editor/ */
	background: #e8f8fa; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 4%, #f4d9ee 10%, #ffffff 30%, #e8f8fa 50%, #e8f8fa 70%, #ffffff 92%, #b3e9ee 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(4%,#ffffff), color-stop(10%,#f4d9ee), color-stop(30%,#ffffff), color-stop(50%,#e8f8fa), color-stop(70%,#e8f8fa), color-stop(92%,#ffffff), color-stop(100%,#b3e9ee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 4%,#f4d9ee 10%,#ffffff 30%,#e8f8fa 50%,#e8f8fa 70%,#ffffff 92%,#b3e9ee 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 4%,#f4d9ee 10%,#ffffff 30%,#e8f8fa 50%,#e8f8fa 70%,#ffffff 92%,#b3e9ee 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 4%,#f4d9ee 10%,#ffffff 30%,#e8f8fa 50%,#e8f8fa 70%,#ffffff 92%,#b3e9ee 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 4%,#f4d9ee 10%,#ffffff 30%,#e8f8fa 50%,#e8f8fa 70%,#ffffff 92%,#b3e9ee 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#b3e9ee',GradientType=0 ); /* IE6-9 */
}
.spellingword__keyboard_button {
	border-radius: 10px;
	background: #FFFFFF;
	border: solid 1px rgb(177, 147, 183);
	box-shadow: 2px 2px 0px rgb(25, 138, 150);
}
.spellingword__keyboard_button:active,
.spellingword__keyboard_button.active {
	margin-left: 1px;
	margin-top: 1px;
	background: rgb(240, 250, 251);
}
.spellingword__variant_button {
	position:relative;
}
.spellingword__silent .textbox_object {
	opacity: 0.5;
}
.spellingword__correct {
	color: #63A222;
}
.spellingword__incorrect {
	color: #D10002;
}
.spellingword__done {
	color: black;
}
.spellingword__answer {
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.5s ease;
	-moz-transition: opacity 0.5s ease;
	-ms-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}
.spellingword__answer.spellingword__correct,
.spellingword__answer.spellingword__incorrect,
.spellingword__answer.spellingword__done {
	visibility: inherit;
	opacity: 1;
}
.spellingword__textshadow {
	text-shadow: 1px 1px 0 #218E9A, -1px -1px 0 #F4D9EE;
}
.spellingword__scroll {
	-webkit-transition: height 0.5s ease, opacity 0.1s ease;
	-moz-transition: height 0.5s ease, opacity 0.1s ease;
	-ms-transition: height 0.5s ease, opacity 0.1s ease;
	-o-transition: height 0.5s ease, opacity 0.1s ease;
	transition: height 0.5s ease, opacity 0.1s ease;
	width: 114px; /*122*/
	background: url("../images/spellingword/list_middle_cloud.png");
}
.spellingword__scroll:before {
	content: url("../images/spellingword/list_top_cloud.png");
	position: absolute;
	left: 0;
	/*top: -10px;*/
	top: -30px;
	line-height: 0;
}
.spellingword__scroll:after {
	content: url("../images/spellingword/list_bottom_cloud.png");
	position: absolute;
	left: 0;
	/*bottom: -10px;*/
	bottom: -30px;
	line-height: 0;
}
/* storyresponse.js */
.storyresponse__correct,
.storyresponse__incorrect {
	color: #005577;
	font-weight: bold;
}
/* expression.js */
.expression__text {
	font-size: 20px;
	line-height: 26px;
}
.br__large_size_space {
	line-height: 42px;
}
.br__medium_size_space {
	line-height: 32px;
}
.br__small_size_space {
	line-height: 0px;
}
.span__end_margin {
	margin-right: 0.1em;
}
.expression__text > span {
	-webkit-transition: background-color 0.3s ease;
	-moz-transition: background-color 0.3s ease;
	-ms-transition: background-color 0.3s ease;
	-o-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
}
.expression__text a {
	cursor: pointer;
}
.expression__text a.highlight {
	color: white;
	background: black;
	padding: 0 3px;
	margin: 0px -3px;
}
.expression__text a:hover {
	text-decoration: underline;
}
.activity__is_busy .expression__text a {
	text-decoration: none !important;
	cursor: default !important;
}

.activity__is_busy .fade_when_busy {
/* marked as important to override inline opacity */
	opacity: 0.5 !important;
}
.activity__is_busy .fade_when_busy .parent_will_fade_when_busy { /* used in spelling.js */
/* marked as important to override inline opacity */
	opacity: 1 !important;
}
.activity__is_busy .hide_when_busy {
/* marked as important to override inline opacity */
	visibility: hidden !important;
}
/* light red */
.expression__text > span:nth-child(6n + 1) {
	background-color: rgb(255, 130, 130);
}
/* light orange */
.expression__text > span:nth-child(6n + 2) {
	background-color: rgb(255, 200, 100);
}
/* light yellow-green */
.expression__text > span:nth-child(6n + 3) {
	background-color: rgb(200, 255, 100);
}
/* light blue-green */
.expression__text > span:nth-child(6n + 4) {
	background-color: rgb(100, 255, 200);
}
/* light purple */
.expression__text > span:nth-child(6n + 5) {
	background-color: rgb(225, 175, 255);
}
/* light blue */
.expression__text > span:nth-child(6n + 6) {
	background-color: rgb(125, 225, 255);
}

.expression__text.expression__hide_colour > span,
.expression__text > span.expression__hide_colour {
	background-color: transparent !important;
	outline: 1px solid transparent !important;
}

/* Used in spelling */
.scale_up_on_hover {
	-webkit-transition: transform 0.1s ease;
	-moz-transition: transform 0.1s ease;
	-ms-transition: transform 0.1s ease;
	-o-transition: transform 0.1s ease;
	transition: transform 0.1s ease;
}
.scale_up_on_hover:hover {
	transform: scale(1.25);
}

/* abra_home.js specific */
.home__menu, .home__footer {
	font-size: 16px; /*13pt*/
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
}
.home__top-bar {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 400px; /* to not cover the overlaping bear's hat */
	height: 89px;
	box-sizing: content-box;
	background: #ffffff;
	border-bottom: solid 1px #000;
}
.home__menu {
	left: 0px;
	top: 240px;
	text-align: center;
	position: absolute;
	width: 800px;
	height: 58px;
	font-size: 20px;
	font-weight: lighter;
	line-height: 58px;
}
.home__footer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 800px;
	max-height: 64px;
}
.home__menu *, .home__footer * {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.home__menu_item {
	padding: 10px 15px;
	border-style: solid;
	border-color: #f0f0f0;
	border-width: 0 0 0 1px;
	cursor: default;
	text-decoration: none;
	color: #838383;
}
.home__menu_item.home__active_link {
	color: #000;
	cursor: pointer;
}
.home__menu_item.home__active_link:hover {
	color: #94243A;
}
.home__menu .home__menu_item:first-child {
	border-width: 0;
}
#footer {
	width:100%;
	background: #C7DA3B;
	text-align: center;
	padding: 0.6em 0; /*15px 0*/
	color: #000;
	font-weight: lighter;
}
#footer a {
	color: inherit;
	text-decoration: none;
	padding: 0 0.5em; /* 0 8px */
}
#footer a:hover {
	text-decoration: underline;
}
#copyright {
	width:100%;
	text-align: center;
	padding: 0.4em;
	background-color: #004B8C;
	color: white;
	font-size: 75%;
}

.make_a_circle {
	border-radius:100%;
	overflow: hidden;
}

.story_word_object__hover:hover {
	/*text-decoration: underline;
	cursor: pointer;*/
	background-color: rgb(204, 255, 255);
	border-radius: 3px;
	box-shadow: 0px 0px 0px 2px rgb(178, 225, 255);
}
/*.activity__is_busy .story_word_object__hover:hover {
	cursor: default;
	background-color: transparent;
	border-radius: 0;
	box-shadow: none;
}*/

.syllable_pop_answer_button {
	text-shadow: 1px 1px 0px #F8E088, 1px -1px 0px #F8E088, -1px -1px 0px #F8E088, -1px 1px 0px #F8E088;
	color: #000000;
	font-weight: bold;
}
.syllable_pop_correction {
	text-shadow: 1px 1px 1px #FEB3E7, 1px -1px 1px #FEB3E7, -1px -1px 1px #FEB3E7, -1px 1px 1px #FEB3E7;
	color: #000000;
	font-weight: bold;
}
.chooser__moveable_container {
	position: relative;
	height: 100%;
}
.chooser__selection_container {
	position:absolute;
	background-color: rgb(200, 206, 210);
	background-color: rgba(255,255,255,0.65);
	height: 124px;
	width: 100%;
	box-sizing: border-box;
	overflow: visible; /* Temporary, until we make a button or something to scroll through the chooser icons --> return to visble */
	padding: 0 40px 0 120px;
	padding: 0 100px 0 140px;
	white-space: nowrap;
}
.chooser__selection_sub_container {
	text-align: center;
	width: 0;
	height: 0;
	visibility: hidden;
	overflow: hidden;
	display: none;
}
.chooser__selection_sub_container.chooser__container_selected {
	position: relative;
	visibility: inherit;
	width: inherit;
	height: inherit;
	overflow: visible;
	display: block;
}
/* imposing relative positioning in order to have the icons center */
.chooser__selection_sub_container > .image_object {
	position: relative !important;
	/* Center the item vertically, requires its parent to have a set height */
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
.chooser__icon_selection_container {
	position:absolute;
}
.chooser__mini_selected {
	border-radius: 100%;
	background-color: rgba(255, 255, 255, 0.4);
	border: 2px solid #fff;
	box-shadow: 0px 0px 4px 0px #000;
	margin: -2px;
}
.chooser__title_selected {
	background-color: rgba(255, 255, 255, 0.4);
	outline: solid #fff 2px;
	box-shadow: 0px 0px 4px 1px #000;
}
/* character page */
.character__title {
	position: relative;
	width: 100%;
	font-size: 25px;
	text-align: right;
	padding: 10px 20px;
	line-height: 1;
	box-sizing: border-box;
}
.character__description {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 350px;
	font-size: 16px;
	text-align: justify;
	padding: 0 20px;
	box-sizing: border-box;
	text-indent: 25px;
	line-height: 1.1;
	overflow-y: auto;
}
.character__description_p {
	margin: 0 0 1em 0;
}
img[usemap], map area {
	outline: none;
}

/* Does not work in IE9 */ /* used in home.js for student button */
.ease-out-back {
	/* http://easings.net/#easeOutBack */
	-webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Does not work in IE9 */ /* used in blending.js for word explosion */
.ease-in-back {
	-webkit-transition: all 300ms cubic-bezier(0.42,-0.98,0.91,0.33);
	-moz-transition: all 300ms cubic-bezier(0.42,-0.98,0.91,0.33);
	-o-transition: all 300ms cubic-bezier(0.42,-0.98,0.91,0.33);
	transition: all 300ms cubic-bezier(0.42,-0.98,0.91,0.33);
	/* http://easings.net/#easeInBack
	-webkit-transition: all 400ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
	-moz-transition: all 400ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
	-o-transition: all 400ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
	transition: all 400ms cubic-bezier(0.6, -0.28, 0.735, 0.045);*/
}
/* used on wordchang.js */
.transform_origin_top_center {
	-webkit-transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	-o-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
}
/* wordchang.js */
.wrdch__text {
	color: #66ffff;
	text-shadow: 1px 1px 0 #3C394F, -1px -1px 0 #3F4952;
}
.wordchang__selection {
	color: #FFFF66;
	text-shadow: none;
}
.wordchang__correction {
	/*color: #FF66FF;*/
	color: #fc9494;
	text-shadow: none;
}
.wrdch__keyboard_button {
	background-image: url('../images/wordchang/bubble.png');/*egg.png*/
	background-size: contain;
	/*color: #004B8C;*/
	text-shadow: 1px 1px 0 #2B4855, -1px -1px 0 #2B4855;
	color: #66FFFF;
}
.wrdch__keyboard_button:active,
.wrdch__keyboard_button.active {
	margin-left: 1px;
	margin-top: 1px;
	color: #FFFFFF;
}

/* used on mactchsound.js */
.transform_origin_center_center {
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

/* to make sure text entered is capitalized -- used in spellingsentence.js */
.to-upper-case {
	text-transform: capitalize;
}

.spellingsentence__keyboard_button {
	border-radius: 5px;
	background-color: #FFF6D7;
	background-image: url('../images/spellingsentence/key_button.gif');
	background-repeat: no-repeat;
	border: solid 1px rgb(178, 177, 131);
	box-shadow: 2px 2px 0px rgb(91, 101, 66);
}
.spellingsentence__special_keyboard_button {
	border-radius: 5px;
	background: #EFE5C4;
	background-repeat: no-repeat;
	border: solid 1px rgb(178, 177, 131);
	box-shadow: 2px 2px 0px rgb(91, 101, 66);
	color: black;
}
.spellingsentence__keyboard_button:active,
.spellingsentence__special_keyboard_button:active,
.spellingsentence__keyboard_button.active,
.spellingsentence__special_keyboard_button.active {
	margin-left: 1px;
	margin-top: 1px;
	background: rgb(227, 221, 185);
}
.spellingsentence__correct {
	color: #00ccff;
}
.spellingsentence__incorrect {
	color: #ff9900;
}
/* blending.js - blending train */
.blending__scroll {
	-webkit-transition: height 0.5s ease, opacity 0.1s ease;
	-moz-transition: height 0.5s ease, opacity 0.1s ease;
	-ms-transition: height 0.5s ease, opacity 0.1s ease;
	-o-transition: height 0.5s ease, opacity 0.1s ease;
	transition: height 0.5s ease, opacity 0.1s ease;
	width: 100px;
	/*padding: 40px 0;*/
	box-sizing: content-box;
	background-color: rgba(255, 255, 121, 0.75);
	transform: translateY(-100%);
}
.blending__scroll:after { /* after to be above the base */
	content: url("../images/blending/list_top.gif");
	position: absolute;
	left: -10px;
	top: -24px;
	line-height: 0;
}
.blending__scroll:before {
	content: url("../images/blending/list_bottom.gif");
	position: absolute;
	left: -10px;
	bottom: -28px;
	line-height: 0;
}
.blending__answer {
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.5s ease;
	-moz-transition: opacity 0.5s ease;
	-ms-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}
.blending__answer.blending__done {
	visibility: inherit;
	opacity: 1;
}
.blending___end_train_wrapper {
	background-image: url("../images/blending/train_elements_rail.gif");
	background-repeat: repeat-x;
	width: 800px;
	height: 116px;
}
.blending__fg_end_train_wrapper {
	background-size: auto 9px; /* 16 * 0.6 */
	padding: 8px;
}
.blending__bg_end_train_wrapper {
	background-size: auto 6px;  /* 16 * 0.4 */
	padding: 6px;
}
.blending___end_train {
	white-space: nowrap;
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	-webkit-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-o-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
}
.important_force_relative_position_on_direct_children > * {
	position: relative !important;
	left: 0 !important;
	top: 0 !important;
}
.speed__text_input {
	position: absolute;
	box-sizing: border-box;
	top: 117px;
	left: 3px;
	width: 112px;
	height: 30px;
	font-size:20px;
	font-family: 'AndikaRegular', Arial, sans-serif;
}
.wordfam__level_btn {
	font-family: 'AndikaRegular', Arial, sans-serif;
	box-sizing:border-box;
	background: #F4F31D;
	background-image: -webkit-linear-gradient(top, #FAF985 0%, #F4F31D 20%, #ADDA3F 80%, #FAF985 100%);
	background-image: -moz-linear-gradient(top, #FAF985 0%, #F4F31D 20%, #ADDA3F 80%, #FAF985 100%);
	background-image: -ms-linear-gradient(top, #FAF985 0%, #F4F31D 20%, #ADDA3F 80%, #FAF985 100%);
	background-image: -o-linear-gradient(top, #FAF985 0%, #F4F31D 20%, #ADDA3F 80%, #FAF985 100%);
	background-image: linear-gradient(to bottom, #FAF985 0%, #F4F31D 20%, #ADDA3F 80%, #FAF985 100%);
	box-shadow: 0px 0px 0px 2px #FFF;
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 28px;
	color: #000000;
	font-size: 16px;
	padding: 7px 14px 7px 14px;
	border: solid #ADDB3D 2px; /*solid #ffcf87 2px;*/
	text-decoration: none;
}
.wordfam__fam_btn {
	font-family: 'AndikaRegular', Arial, sans-serif;
	box-sizing:border-box;
	background: #FF7593;
	background-image: -webkit-linear-gradient(top, #FFA8C6 0%, #FF7593 20%, #FF4260 80%, #FFA8C6 100%);
	background-image: -moz-linear-gradient(top, #FFA8C6 0%, #FF7593 20%, #FF4260 80%, #FFA8C6 100%);
	background-image: -ms-linear-gradient(top, #FFA8C6 0%, #FF7593 20%, #FF4260 80%, #FFA8C6 100%);
	background-image: -o-linear-gradient(top, #FFA8C6 0%, #FF7593 20%, #FF4260 80%, #FFA8C6 100%);
	background-image: linear-gradient(to bottom, #FFA8C6 0%, #FF7593 20%, #FF4260 80%, #FFA8C6 100%);
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 28px;
	color: #FFFFFF;
	text-shadow: 1px 1px 0px #7B2A29, -1px -1px 0px #7B2A29, -1px 1px 0px #7B2A29, 1px -1px 0px #7B2A29;
	box-shadow: 0px 0px 0px 2px #FFF;
	font-size: 14px;
	padding: 3px 16px 3px 16px;
	margin: 2px 3px;
	border: solid #FF4260 2px;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
}
.wordfam__advanced_btn {
	font-family: 'AndikaRegular', Arial, sans-serif;
	box-sizing:border-box;
	background: #FF7593;
	background-image: -webkit-linear-gradient(top, #7AACF5 0%, #4C8EEF 20%, #4C8EEF 80%, #75ADE8 100%);
	background-image: -moz-linear-gradient(top, #7AACF5 0%, #4C8EEF 20%, #4C8EEF 80%, #75ADE8 100%);
	background-image: -ms-linear-gradient(top, #7AACF5 0%, #4C8EEF 20%, #4C8EEF 80%, #75ADE8 100%);
	background-image: -o-linear-gradient(top, #7AACF5 0%, #4C8EEF 20%, #4C8EEF 80%, #75ADE8 100%);
	background-image: linear-gradient(to bottom, #7AACF5 0%, #4C8EEF 20%, #4C8EEF 80%, #75ADE8 100%);
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 28px;
	color: #FFFFFF;
	text-shadow: 1px 1px 0px #114CA8, -1px -1px 0px #114CA8, -1px 1px 0px #114CA8, 1px -1px 0px #114CA8;
	box-shadow: 0px 0px 0px 2px #FFF;
	font-size: 14px;
	padding: 1px 40px;
	margin: 2px 3px;
	border: solid #114CA8 2px;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
}
.wordfam__level_btn:hover,
.wordfam__fam_btn:hover {
	text-decoration: none;
}
.wordfam__fam_text {
	font-family: 'AndikaRegular', Arial, sans-serif;
	font-size: 14px;
	margin: 8px 0 0px;
}
.wordfam__p {
	margin: 5px 0;
}
.wordfam__hr {
	border: 0;
	height: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.wordfam__level_btn.level_1:before {
	content: url("../images/wordfam/lv_1.png");
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	line-height: 0;
}
.wordfam__level_btn.level_2:before {
	content: url("../images/wordfam/lv_2.png");
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	line-height: 0;
}
.wordfam__paintcan {
	text-shadow: 1px 1px 0px #CCF1FF, -1px -1px 0px #CCF1FF, -1px 1px 0px #CCF1FF, 1px -1px 0px #CCF1FF;
}
.wordfam__blackboard {
	color: #FFD400;
	text-shadow: -1px 1px #025C1C, 1px -1px #025C1C, 1px 1px #025C1C, -1px -1px #025C1C;
	font-weight: lighter;
	transform: skewY(-30deg) scaleY(1.5);
}
.wordfam__easel:before {
	content: '';
	display: inline-block;
	position: absolute;
	width: 88px;
	height: 88px;
	background-color: rgba(255, 255, 255, 0);
	top: -22px;
	left: -9px;
	border-radius: 100%;
	-webkit-transition: background-color 0.5s ease;
	-moz-transition: background-color 0.5s ease;
	-ms-transition: background-color 0.5s ease;
	-o-transition: background-color 0.5s ease;
	transition: background-color 0.5s ease;
}
.wordfam__easel.paint1:before {
	background-color: rgb(241, 39, 39);
	background-color: rgba(241, 39, 39, 0.4);
}
.wordfam__easel.paint2:before {
	background-color: rgb(103, 135, 27);
	background-color: rgba(103, 135, 27, 0.4);
}
.wordfam__easel.paint3:before {
	background-color: rgb(136, 51, 128);
	background-color: rgba(136, 51, 128, 0.4);
}
.wordfam__easel.paint4:before {
	background-color: rgb(255, 102, 0);
	background-color: rgba(255, 102, 0, 0.4);
}
.wordfam__minigame_result {
	color: #D00D0D;
	text-shadow: -2px 2px 1px #FFFFFF, 2px -2px 1px #FFFFFF, 2px 2px 1px #FFFFFF, -2px -2px 1px #FFFFFF;
}
/* decoding text */
.decoding__text {
	color: #000;
	text-shadow: 0px 0px 2px #FFFFFF, 0px 0px 5px #c6f5af;
}
.decoding__highlight {
	color: #fc7270; /*#FFF;*/
	text-shadow: 0px 0px 2px #000000, 0px 0px 5px #000; /*#19982b;*/
}


/* Standard ui_button_element look -- From ELM */
.elm-button {
	display: inline-block;
	cursor: pointer;
	border: 2px solid #999999;
	background: #EEEEEE;
	border-radius: 5px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 1px;
	-moz-box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 1px;
	box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 1px;
	margin: 0 2px 2px 0;
	text-shadow: #FFFFFF 1px 1px 0px;
	color: #FF6600;
	text-decoration: none;
	vertical-align: middle;
	font-weight: bold;
	font-size: 20px;
	line-height: 1;
	min-width: 50px;
	min-height: 40px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-transition: opacity 1s, background 1s, color 1s, border-color 1s;
	   -moz-transition: opacity 1s, background 1s, color 1s, border-color 1s;
		-ms-transition: opacity 1s, background 1s, color 1s, border-color 1s;
		 -o-transition: opacity 1s, background 1s, color 1s, border-color 1s;
			transition: opacity 1s, background 1s, color 1s, border-color 1s;
}
/* ABRA variation */
.elm-button {
  border-radius: 12px;
	border: 1px solid #004D8D;
  color: #FF561F;
	/*background: #FFF;
	text-shadow: none;
	color: #004D8D;*/
}
.elm-button > div > .textbox_object {
  font-weight: normal;
  font-family: "Rockwell",'AndikaRegular', Helvetica, sans-serif;
}
.elm-button:hover {
	border-color: #FFFFFF;
	background-color: #FFFFFF;
}
.elm-button:active {
	margin: 1px;
	border-color: #FFFFFF;
	background-color: #EEEEEE;
	box-shadow: none;
	-webkit-transition: none;
	   -moz-transition: none;
		-ms-transition: none;
		 -o-transition: none;
			transition: none;
}
.elm-button > img {
/* These are only marked important because button_object puts the left/top values into the dom even if they are undefined */
	left: 5px;
	top: 50% !important; /* aligns the image to the center of the button, it can overflow the button */
	position: absolute !important; /* does not alter size of button */
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
.elm-button > div {
	padding: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}
.elm-button.right_content {
	text-align: right;
}
.profile_name {
	text-align: center;
	color: #004D8D;
	text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
		/*color: rgb(255, 254, 245);
		text-shadow: 1px 1px 0 rgb(136, 61, 1);*/
}
/* */
.studentstories__story_div {
	position: absolute;
	left: 0;
	top: 0;
	-webkit-transition: opacity 0.5s ease;
	-moz-transition: opacity 0.5s ease;
	-ms-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}
.studentstories__accent0,
.studentstories__accent1,
.studentstories__accent2 {
	background-color: rgba(255, 255, 255, 0.5);
	background-repeat: no-repeat;
	border: solid 2px #ffffff;
	border-radius: 5px;
}

.spotlight {
	border-radius: 50%;
	opacity: 0.5;
	animation: single_rotate 0.3s ease-in-out 0s alternate infinite;
}
.spotlight.reverse {
	border-radius: 50%;
	opacity: 0.5;
	animation: single_rotate_reverse 0.3s ease-in-out 0s alternate infinite;
}
.spotlight.blue {
	background-color: blue;
}
.spotlight.white {
	background-color: #fff;
}