@-webkit-keyframes shake {
	0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
@-moz-keyframes shake {
	0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
	10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
	40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
	50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
	100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes shake {
	0% { transform: translate(2px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(0px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(2px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(2px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@-webkit-keyframes flash {
	0% { opacity: 1; }
	10% { opacity: 0.8; }
	20% { opacity: 0.6; }
	30% { opacity: 0.4; }
	40% { opacity: 0.2; }
	50% { opacity: 0.1; }
	60% { opacity: 0.2; }
	70% { opacity: 0.4; }
	80% { opacity: 0.6; }
	90% { opacity: 0.8; }
	100% { opacity: 1; }
}
@-moz-keyframes flash {
	0% { opacity: 1; }
	10% { opacity: 0.8; }
	20% { opacity: 0.6; }
	30% { opacity: 0.4; }
	40% { opacity: 0.2; }
	50% { opacity: 0.1; }
	60% { opacity: 0.2; }
	70% { opacity: 0.4; }
	80% { opacity: 0.6; }
	90% { opacity: 0.8; }
	100% { opacity: 1; }
}
@keyframes flash {
	0% { opacity: 1; }
	10% { opacity: 0.8; }
	20% { opacity: 0.6; }
	30% { opacity: 0.4; }
	40% { opacity: 0.2; }
	50% { opacity: 0.1; }
	60% { opacity: 0.2; }
	70% { opacity: 0.4; }
	80% { opacity: 0.6; }
	90% { opacity: 0.8; }
	100% { opacity: 1; }
}

@-webkit-keyframes teeter {
	0% { -webkit-transform: rotate(0deg); }
	5% { -webkit-transform: rotate(10deg); }
	10% { -webkit-transform: rotate(-10deg); }
	30% { -webkit-transform: rotate(7deg); }
	50% { -webkit-transform: rotate(-5deg); }
	70% { -webkit-transform: rotate(3deg); }
	90% { -webkit-transform: rotate(-2deg); }
	100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes teeter {
	0% { -moz-transform: rotate(0deg); }
	5% { -moz-transform: rotate(10deg); }
	10% { -moz-transform: rotate(-10deg); }
	30% { -moz-transform: rotate(7deg); }
	50% { -moz-transform: rotate(-5deg); }
	70% { -moz-transform: rotate(3deg); }
	90% { -moz-transform: rotate(-2deg); }
	100% { -moz-transform: rotate(0deg); }
}
@keyframes teeter {
	0% { transform: rotate(0deg); }
	5% { transform: rotate(10deg); }
	10% { transform: rotate(-10deg); }
	30% { transform: rotate(7deg); }
	50% { transform: rotate(-5deg); }
	70% { transform: rotate(3deg); }
	90% { transform: rotate(-2deg); }
	100% { transform: rotate(0deg); }
}

@font-face {
    font-family: 'SassoonInfant';
    src: url('/sample-activities/service/util/cp/curriculum/fonts/sassooninfant-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SassoonInfant';
    src: url('/sample-activities/service/util/cp/curriculum/fonts/sassoinfbol-webfont.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'SassoonInfant';
    src: url('/sample-activities/service/util/cp/curriculum/fonts/sassoinfmed-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

input[type=text], textarea, select {
	font-family: SassoonInfant, Comic Sans MS, Arial;
}

.interaction label {
	color: black;
    font-weight: normal;
}

.interaction .question {
	font-weight: bold;
}

.spell .before {
	display: block;
	line-height: 2em;
}
.spell .after {
	display: none;
	padding-right: 10px;
	line-height: 2em;
}

.spell .word {
	color: black;
	font-weight: bold;
	font-size: 40px;
	vertical-align: middle;
	font-family: SassoonInfant, Comic Sans MS, Arial;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.spell .interaction_controls {
	display: inline-block;
	vertical-align: middle;
	margin-left: 50px;
}

.spell .word.compare-mode{
	top: -50px;
}
.assessment .spell .word.compare-mode{
	top: -20px;
}

.spell .answer-wrapper.compare-mode{
	
	top:23px;
}
.assessment .spell .answer-wrapper.compare-mode{
	
	top:65px;
}
.spell .answer-wrapper.compare-mode input{
	height: 50px;
	line-height: 50px;
	padding: 0px !important;
}
.assessment .spell .interaction_controls, .assessment .spell .narration-control{
	display:none !important;
}

.results,
.messages,
.hint_container,
.messages > span {
	display: none;
}

.matching_pairs .source_container {
	min-height: 100px;
	text-align: center;
	padding-right: 150px;
}
.matching_pairs .source_container > * {
	margin: 10px;
	color: white;
}
.matching_pairs .destination_container {
	position: relative;
	color: white;
}
.matching_pairs .destination {
	display: block;
	position: absolute;
	border: 1px solid black;
	min-width: 100px;
	min-height: 100px;
}
.matching_pairs .destination > .category {
	color: #4C5653;
	position: absolute;
	top: -20px;
	left :0;
}
.matching_pairs .destination > .valid, .matching_pairs .destination > .invalid {
	display: none;
}

.matching_pairs .destination > .dropzone {
	display: block;
	min-height: 100px;
}
.matching_pairs .destination > .dropzone > * {
	margin: 10px;
}

.matching_pairs:not(.disabled ) .ui-draggable:not(.ui-draggable-dragging){
	cursor: move;
}

/* Money Game */

.matching_pairs.money .destination_container {
	text-align: center;
}

.matching_pairs.money .destination {
	background: url(org.apache.velocity.tools.view.ViewContextTool@2044bda1/images/primary/interaction/glass_jar.png) no-repeat scroll left top transparent;
	border: 0 none;
    height: 352px;
    width: 296px;
    position: static;
    display: inline-block;
}

.matching_pairs.money .source_container > * {
	margin: 0;
}

.matching_pairs.money .destination > .dropzone > * {
	margin: -10px;
}

.matching_pairs.money .destination > .dropzone {
    display: table-cell;
    height: 310px;
    padding-left: 30px;
    text-align: center;
    vertical-align: bottom;
    width: 220px;
}

.matching_pairs.money .destination:hover {
    background-position: right top;
}


div.interaction_sequence div.page_container div.interaction.matching_pairs.money div.source_container span,
div.interaction_sequence div.page_container div.interaction.matching_pairs.money span.dropzone span {
	background: url(org.apache.velocity.tools.view.ViewContextTool@2044bda1/images/primary/interaction/coins.png) no-repeat scroll left top transparent;
	display: inline-block;
    height: 70px !important;
    width: 70px !important;
    text-indent: -99999px;
}

div.interaction_sequence div.page_container div.interaction.matching_pairs.money div.source_container span.one_pound {
	background-position: 0 top !important;	
}

div.interaction_sequence div.page_container div.interaction.matching_pairs.money div.source_container span.fifty_pence {
	background-position: -70px top !important;	
}

div.interaction_sequence div.page_container div.interaction.matching_pairs.money div.source_container span.twenty_pence {
	background-position: -140px top !important;	
}

div.interaction_sequence div.page_container div.interaction.matching_pairs.money div.source_container span.twenty_pence {
	background-position: -140px top !important;	
}

div.interaction_sequence div.page_container div.interaction.matching_pairs.money div.source_container span.ten_pence {
	background-position: -210px top !important;	
}

div.interaction_sequence div.page_container div.interaction.matching_pairs.money div.source_container span.five_pence {
	background-position: -280px top !important;	
}

div.interaction_sequence div.page_container div.interaction.matching_pairs.money div.source_container span.two_pence {
	background-position: -350px top !important;	
}

div.interaction_sequence div.page_container div.interaction.matching_pairs.money div.source_container span.one_pence {
	background-position: -420px top !important;	
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span.one_pound {
	background-position: 0 bottom !important;	
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span.fifty_pence {
	background-position: -70px bottom !important;	
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span.twenty_pence {
	background-position: -140px bottom !important;	
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span.twenty_pence {
	background-position: -140px bottom !important;	
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span.ten_pence {
	background-position: -210px bottom !important;	
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span.five_pence {
	background-position: -280px bottom !important;	
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span.two_pence {
	background-position: -350px bottom !important;	
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span.one_pence {
	background-position: -420px bottom !important;	
}

div.interaction_sequence div.page_container div.interaction.money div.destination_container .destination.just_populated_1 {
	-webkit-transform-origin: 50% 90%;
	-moz-transform-origin: 50% 90%;
	transform-origin: 50% 90%;
	-webkit-animation: 5s ease-out 1 teeter;
	-moz-animation: 5s ease-out 1 teeter;
	animation: 5s ease-out 1 teeter;
}

div.interaction_sequence div.page_container div.interaction.money div.destination_container .destination.just_populated_2 {
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-animation: 0.8s linear infinite shake;
	-moz-animation: 0.8s linear infinite shake;
	animation: 0.8s linear infinite shake;
}

div.interaction_sequence div.page_container div.interaction.shapes div.destination_container .destination.just_populated .wrapper {
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-animation: 0.8s linear infinite flash;
	-moz-animation: 0.8s linear infinite flash;
	animation: 0.8s linear infinite flash;
}

/* End Money Game */

.choose .feedback {
	display: none;
}		
.choose label {
	display: block;
}

.feedback {
    background: none repeat scroll 0 0 #B3CFF9;
    border: 1px solid #7FAAED;
    border-radius: 5px 5px 5px 5px;
    color: #275396;
    font-size: 12px;
    font-weight: bold;
    margin-left: 8px;
    margin-top: -1px;
    padding: 3px 8px 2px;
    position: absolute;
}

.messages {
	display: none;
	outline: none;
    font-weight: bold;
    margin: 5px 0 14px;
    text-shadow: 0 0px 4px rgba(255, 255, 255, 0.6);
}

.messages > * {
	display: none;
}

.messages.no_errors, .messages.errors, .messages.timeout, .messages.rejected, .messages.assessment {
	display: block;
}

.messages.rejected {
	position: absolute;	
}

.messages.no_errors .no_errors, .messages.errors .errors, .messages.timeout .timeout, .messages.rejected .rejected, .messages.assessment .assessment {
	display: inline-block;
	outline: none;
	border: 1px solid;
	border-radius: 12px;
	padding: 6px 8px;
}

.messages .no_errors, .messages .assessment {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #09AA11;
    color: #03A20B;
}

.messages .errors, .messages .timeout, .messages .rejected {
    background: #FFF;
    border-color: #B948CC;
    color: #BE34C5;
}

.interaction_sequence input[type="text"] {
    display: block;
}

.interaction_sequence input[type="number"] {
	padding: 3px 4px;
}

.interaction_sequence input[type="text"],
.interaction_sequence input[type="number"] {
    border: 1px solid #cccccc;
    border-radius: 6px 6px 6px 6px;
    outline: none;
}

.interaction_sequence input[type="text"].no-input,
.interaction_sequence input[type="number"].no-input {
	-webkit-text-fill-color: #054B98;
	opacity: 1;
}

.interaction_sequence .interaction.disabled input[type="text"].no-input,
.interaction_sequence .interaction.disabled input[type="number"].no-input {
	opacity: 0.4;
}

.interaction_sequence input[type="text"]:hover,
.interaction_sequence input[type="text"]:focus,
.interaction_sequence input[type="number"]:hover,
.interaction_sequence input[type="number"]:focus {
	border: 1px solid #A8A8A8;
    border-radius: 6px 6px 6px 6px;
    outline: none;
}

.interaction_sequence input[type="text"]:focus:hover,
.interaction_sequence input[type="number"]:focus:hover {
	border: 1px solid #cccccc;
}

/* Shapes Game */

.matching_pairs.shapes .destination_container {
    margin: 0 auto;
    text-align: center;
}

.matching_pairs.shapes .destination {
    border: 0 none;
    display: inline-block;
    margin-right: 14px;
    margin-top: 16px;
    position: relative;
    width: 250px;
    vertical-align: top;
    z-index: 1;
}

.matching_pairs.shapes .destination h2 {
    color: #06C4FF;
    height: 30px;
    text-align: center;
}

.matching_pairs.shapes .source_container > * {
	margin: 5px;
}

.matching_pairs.shapes .destination > .dropzone {
    min-height: 220px;
    padding: 6px;
    text-align: center;
}

div.interaction_sequence div.page_container div.interaction.matching_pairs.shapes div.destination_container .destination .wrapper {
    border: 2px dashed #00C3FF;
    border-radius: 12px 12px 12px 12px;
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0;
	right: 0;
	z-index: -1;
}


div.interaction_sequence div.page_container div.interaction.matching_pairs.shapes div.source_container span,
div.interaction_sequence div.page_container div.interaction.matching_pairs.shapes div.destination_container .destination span.dropzone span {
	background: url(org.apache.velocity.tools.view.ViewContextTool@2044bda1/images/primary/interaction/2d_and_3d_shapes.png) no-repeat scroll left top transparent;
	display: inline-block;
    height: 75px !important;
    width: 75px;
    text-indent: -99999px;
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span {
    margin: 2px;
}


div.interaction_sequence div.page_container div.interaction.matching_pairs.shapes div.source_container span.triangle {
	background-position: left top !important;
	width: 87px !important;
}

div.interaction_sequence div.page_container div.interaction.matching_pairs.shapes div.source_container span.square {
	background-position: -87px top !important;	
	width: 76px !important;
}

div.interaction_sequence div.page_container div.interaction.matching_pairs.shapes div.source_container span.circle { 
	background-position: -163px top !important;	
	width: 75px !important;
}

div.interaction_sequence div.page_container div.interaction.matching_pairs.shapes div.source_container span.pentagon {
	background-position: -238px top !important;
	width: 78px !important;	
}

div.interaction_sequence div.page_container div.interaction.matching_pairs.shapes div.source_container span.hexagon {
	background-position: -316px top !important;
	width: 85px !important;		
}

div.interaction_sequence div.page_container div.interaction.matching_pairs.shapes div.source_container span.heptagon {
	background-position: -401px top !important;	
	width: 75px !important;	
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span.triangle {
	background-position: left bottom !important;
	width: 87px !important;
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span.square {
	background-position: -88px bottom !important;	
	width: 75px !important;	
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span.circle {
	background-position: -163px bottom !important;	
	width: 75px !important;
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span.pentagon {
	background-position: -238px bottom !important;
	width: 78px !important;	
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span.hexagon {
	background-position: -316px bottom !important;
	width: 85px !important;		
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span.heptagon {
	background-position: -401px bottom !important;	
	width: 75px !important;	
}

div.interaction_sequence div.page_container div.interaction.matching_pairs.shapes div.source_container span.cube {
	background-position: -476px top !important;
	width: 66px !important;		
}

div.interaction_sequence div.page_container div.interaction.matching_pairs.shapes div.source_container span.cuboid {
	background-position: -542px top !important;	
	width: 110px !important;	
}

div.interaction_sequence div.page_container div.interaction.matching_pairs.shapes div.source_container span.sphere { 
	background-position: -652px top !important;	
	width: 75px !important;
}

div.interaction_sequence div.page_container div.interaction.matching_pairs.shapes div.source_container span.cylinder {
	background-position: -727px top !important;
	width: 61px !important;	
}

div.interaction_sequence div.page_container div.interaction.matching_pairs.shapes div.source_container span.triangular_prism {
	background-position: -788px top !important;	
	width: 122px !important;	
}

div.interaction_sequence div.page_container div.interaction.matching_pairs.shapes div.source_container span.triangular_based_pyramid {
	background-position: -910px top !important;
	width: 83px !important;		
	
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span.cube {
	background-position: -476px bottom !important;
	width: 66px !important;	
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span.cuboid  {
	background-position: -542px bottom !important;	
	width: 110px !important;
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span.sphere {
	background-position: -652px bottom !important;	
	width: 75px !important;
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span.cylinder {
	background-position: -727px bottom !important;
	width: 61px !important;	
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span.triangular_prism {
	background-position: -788px bottom !important;	
	width: 122px !important;	
}

div.interaction_sequence div.page_container div.interaction div.destination_container .destination span.dropzone span.triangular_based_pyramid {
	background-position: -910px bottom !important;
	width: 83px !important;	
}

.interaction.ordering ul.answer {
	position: relative;
	-webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;      
	user-select: none;
}

.interaction.ordering.horizontal ul.answer {
	white-space: nowrap;
}

.interaction.ordering.horizontal ul.answer > li {
	display: inline-block;
	margin-right: 0.6em;
	vertical-align: middle;
}

.interaction.ordering.vertical ul.answer > li {
	margin-bottom: 0.4em;
	text-align: center;
}

.interaction.ordering.numeric ul.answer > li {
    background-color: #EAF6FF;
    border: 1px dashed #0087E7;
    border-radius: 8px 8px 8px 8px;
    color: #004576;
    font-family: SassoonInfant, Comic Sans MS, Arial;
    font-size: 3em;
    font-weight: bold;
    padding: 10px;
    position: relative;
    text-shadow: 0 1px #FFFFFF;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
.interaction.ordering.numeric.horizontal ul.answer > li:after {
    background: url(org.apache.velocity.tools.view.ViewContextTool@2044bda1/images/primary/interaction/arrow_right.png) no-repeat scroll left center transparent;
    content: " ";
    height: 20px;
    margin-top: -10px;
    position: absolute;
    right: -28px;
    top: 50%;
    width: 12px;
}
.interaction.ordering.numeric ul.answer > li:last-child:after,
.interaction.ordering.numeric ul.answer > li.ui-sortable-helper:after {
	display: none;
}
@-webkit-keyframes pulse {
	0% {
	    -webkit-transform: scale(1);
	}
	50% {
	    -webkit-transform: scale(1.08);
	}
	100% {
	    -webkit-transform: scale(1);
	}
}
@-moz-keyframes pulse {
	0% {
	    -moz-transform: scale(1);
	}
	50% {
	    -moz-transform: scale(1.08);
	}
	100% {
	    -moz-transform: scale(1);
	}
}
@keyframes pulse {
	0% {
	    transform: scale(1);
	}
	50% {
	    transform: scale(1.08);
	}
	100% {
	    transform: scale(1);
	}
}
@keyframes fade-in-out {
	0% {
	    transform: scale(1);
		opacity:1;
	}
	50% {
	    transform: scale(1);
		opacity:0;
	}
	100% {
	    transform: scale(1);
		opacity:1;
	}
}

@-webkit-keyframes flash-red {
	0% {background-color: #FF8282;}
	100% {background-color: #FF0000;}
}
@-moz-keyframes flash-red {
	0% {background-color: #FF8282;}
	100% {background-color: #FF0000;}
}
@keyframes flash-red {
	0% {background-color: #FF8282;}
	100% {background-color: #FF0000;}
}

@-webkit-keyframes hover-touch-blue {
    0% {background: none repeat scroll 0 0 rgba(1, 1, 1, 0.2);}
    100% {background: none repeat scroll 0 0 rgba(1, 1, 1, 0);}
}

@-moz-keyframes hover-touch-blue {
    0% {background: none repeat scroll 0 0 rgba(1, 1, 1, 0.2);}
    100% {background: none repeat scroll 0 0 rgba(1, 1, 1, 0);}
}

@keyframes hover-touch-blue {
    0% {background: none repeat scroll 0 0 rgba(1, 1, 1, 0.2);}
    100% {background: none repeat scroll 0 0 rgba(1, 1, 1, 0);}
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(359deg);}
}
@keyframes rotation {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans Light';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(//themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans Semibold';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(//themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Luckiest Guy';
  font-style: normal;
  font-weight: 400;
  src: local('Luckiest Guy'), local('LuckiestGuy-Regular'), url(//themes.googleusercontent.com/static/fonts/luckiestguy/v3/5718gH8nDy3hFVihOpkY5HhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

*:not(input, select, option, textarea), *:before:not(input, select, option, textarea), *:after:not(input, select, option, textarea) {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select:none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.hidden {
    display: none !important;
}
.nofocus {
	opacity: 0.25;
}
.ellipsis {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap;
}
body.activity {
	background-attachment: fixed;
	background-color: #37B8FC;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	height: 100%;
}
@media screen and (min-width: 1030px) {
    body.activity {
        background-image: url(/sample-activities/service/util/cp/curriculum/images/bg.jpg);
    }
}
body.activity > .background_overlay {
    display: none;
}
.activity .btn {
	border-radius: 100% 100% 100% 100%;
    cursor: pointer;
    display: inline-block;
    text-indent: -3000em;
    outline: 0 none;
    position: relative;
    -webkit-transition: box-shadow 100ms ease-in 0s;
    -moz-transition: box-shadow 100ms ease-in 0s;
    transition: box-shadow 100ms ease-in 0s;
    vertical-align: top;
	-webkit-appearance: none;
}

.activity .btn.text {
	text-align: center;
    text-indent: 0;
}
.activity .btn.medium.text {
    margin-bottom: 60px;
    margin-right: 20px;
}
.activity .btn > .label {
    display: block;
    font-size: 13px;
    margin-top: 60px;
}
.activity .btn.small {
    background: url(/sample-activities/service/util/cp/curriculum/images/Button_icons_retina_small.png) no-repeat scroll 0 0 transparent;
    background-size: 360px 40px;
    border: 2px solid #FFFFFF;
    height: 40px;
    width: 40px;
}
.activity .btn.small.save {
	background-position: -202px 0;
}
.activity .btn.small.save:active,
.activity .btn.small.save.active,
.activity .btn.small.save.selected {
	background-position: -202px 2px;
}
.activity .btn.small.info {
	background-position: -40px 0;
}
.activity .btn.small.info:active,
.activity .btn.small.info.active,
.activity .btn.small.info.selected {
	background-position: -40px 1px;
}
.activity .btn.small.close {
	background-position: -80px 0;
}
.activity .btn.small.close:active,
.activity .btn.small.close.active,
.activity .btn.small.close.selected {
	background-position: -80px 1px;
}
.activity .btn.small.exit {
	background-position: 0 0;
}
.activity .btn.small.exit:active,
.activity .btn.small.exit.active,
.activity .btn.small.exit.selected {
	background-position: 0 1px;
}
.activity .btn.small.hint {
	background-position: -120px 0;
}
.activity .btn.small.hint:active,
.activity .btn.small.hint.active,
.activity .btn.small.hint.selected {
	-webkit-animation: none;
	-moz-animation: none;
	animation: none;
	background-position: -120px 1px;
}
.activity .btn.small.save-program {
	background-position: -243px 0;
}
.activity .btn.small.save-program:active,
.activity .btn.small.save-program.active,
.activity .btn.small.save-program.selected {
	background-position: -243px 2px;
}
.activity .btn.small.share-program {
	background-position: -279px 0;
}
.activity .btn.small.share-program:active,
.activity .btn.small.share-program.active,
.activity .btn.small.share-program.selected {
	background-position: -279px 2px;
}
.activity .btn.small.restart {
    background-position: -160px 0;
    border: 3px solid #32A3F4;
}
.activity .btn.small.blue.restart:after {
    border-radius: 100% 100% 100% 100%;
    bottom: -3px;
    box-shadow: 0 2px 2px rgba(1, 1, 1, 0.2);
    content: " ";
    left: -3px;
    position: absolute;
    right: -3px;
    top: -3px;
}


.small.btn.purple.restart :hover {
    background-color: #9d67f9;
    box-shadow: 0 -1px 0 2px #7735e5 inset, 0 -2px 1px 2px #9d67f9 inset, 0 8px rgba(255, 255, 255, 0.25) inset;
}
.small.btn.purple.restart {
	float: left;
	margin-right: 8px;
	background-color: #7735e5;
	box-shadow: 0 -1px 0 2px #8b53e9 inset, 0 -2px 1px 2px #8b53e9 inset, 0 8px rgba(255, 255, 255, 0.25) inset;
	border: 2px solid #ffffff;
}

.activity .btn.small.restart:active,
.activity .btn.small.restart.active,
.activity .btn.small.restart.selected {
    background-position: -160px 1px;
}
.activity .btn.small.blue,
.activity .btn.medium.blue {
	background-color: #0390F4;
	box-shadow: 0 -1px 0 2px #0869AF inset, 0 -2px 1px 2px #2FA9FF inset, 0 8px rgba(255, 255, 255, 0.25) inset;
}
.activity .btn.small.blue:hover,
.activity .btn.medium.blue:hover {
	background-color: #30A4F7;
    box-shadow: 0 -1px 0 2px #0077CB inset, 0 -2px 1px 2px #40B0FF inset, 0 8px rgba(255, 255, 255, 0.25) inset;
}
.activity .btn.small.blue:active,
.activity .btn.small.blue.active,
.activity .btn.small.blue.selected,
.activity .btn.medium.blue:active,
.activity .btn.medium.blue.active,
.activity .btn.medium.blue.selected {
	background-color: #0084E1;
    box-shadow: 0 0 0 3px #005795 inset, 0 -2px 1px 2px #2184CB inset, 0 10px rgba(1, 1, 1, 0.12) inset;
}
.activity .btn.medium.comment-toggle {
    background-position: -48px 0;
}
.activity .btn.medium.comment-toggle:active,
.activity .btn.medium.comment-toggle.active,
.activity .btn.medium.comment-toggle.selected {
    background-position: -48px 2px;
}
.activity .btn.small.red,
.activity .btn.medium.red {
	background-color: #E53030;
	box-shadow: 0 -1px 0 2px #A30000 inset, 0 -2px 1px 2px #F76F6F inset, 0 8px rgba(255, 255, 255, 0.25) inset;
}
.activity .btn.small.red:hover,
.activity .btn.medium.red:hover {
	background-color: #F54747;
    box-shadow: 0 -1px 0 2px #B80000 inset, 0 -2px 1px 2px #FC8C8C inset, 0 8px rgba(255, 255, 255, 0.25) inset;
}
.activity .btn.small.red:active,
.activity .btn.small.red.active,
.activity .btn.small.red.selected,
.activity .btn.medium.red:active,
.activity .btn.medium.red.active,
.activity .btn.medium.red.selected {
	background-color: #E53030;
    box-shadow: 0 0 0 3px #6C0000 inset, 0 -2px 1px 2px #EA2F2F inset, 0 10px rgba(1, 1, 1, 0.12) inset;
}
.activity .btn.small.yellow,
.activity .btn.medium.yellow {
	background-color: #FFC334;
				box-shadow: 0 -1px 0 2px #CD9922 inset, 0 -2px 1px 2px #FFDB89 inset, 0 8px rgba(255, 255, 255, 0.32) inset;
}
.activity .btn.small.yellow:hover,
.activity .btn.medium.yellow:hover {
    background-color: #FECE61;
    box-shadow: 0 -1px 0 2px #DA9F18 inset, 0 -2px 1px 2px #FFE099 inset, 0 8px rgba(255, 255, 255, 0.32) inset;
}
.activity .btn.small.yellow:active,
.activity .btn.small.yellow.active,
.activity .btn.small.yellow.selected,
.activity .btn.medium.yellow:active,
.activity .btn.medium.yellow.active,
.activity .btn.medium.yellow.selected {
    background-color: #F8B928;
    box-shadow: 0 0 0 3px #C69421 inset, 0 -2px 1px 2px #F9AE00 inset, 0 10px rgba(1, 1, 1, 0.12) inset;
}
.activity .btn.small.green,
.activity .btn.medium.green {
    background-color: #0EC518;
    box-shadow: 0 -1px 0 2px #02930A inset, 0 -2px 1px 2px #14E01F inset, 0 8px rgba(255, 255, 255, 0.25) inset;
}
.activity .btn.small.green:hover,
.activity .btn.medium.green:hover {
    background-color: #00D50C;
    box-shadow: 0 -1px 0 2px #00A209 inset, 0 -2px 1px 2px #36EE40 inset, 0 8px rgba(255, 255, 255, 0.32) inset;
}
.activity .btn.small.green:active,
.activity .btn.small.green.active,
.activity .btn.small.green.selected,
.activity .btn.medium.green:active,
.activity .btn.medium.green.active,
.activity .btn.medium.green.selected {
    background-color: #00B70A;
    box-shadow: 0 0 0 3px #007B07 inset, 0 -2px 1px 2px #19AA21 inset, 0 10px rgba(1, 1, 1, 0.12) inset;
}
.activity .btn.small.orange,
.activity .btn.medium.orange {
    background-color: #FF671B;
    box-shadow: 0 -1px 0 2px #D74700 inset, 0 -2px 1px 2px #FF9D6D inset, 0 8px rgba(255, 255, 255, 0.3) inset;
}
.activity .btn.small.orange:hover,
.activity .btn.medium.orange:hover {
    background-color: #FF7C3B;
    box-shadow: 0 -1px 0 2px #E84F03 inset, 0 -2px 1px 2px #FF9D6D inset, 0 8px rgba(255, 255, 255, 0.3) inset;
}
.activity .btn.small.orange:active,
.activity .btn.small.orange.active,
.activity .btn.small.orange.selected,
.activity .btn.medium.orange:active,
.activity .btn.medium.orange.active,
.activity .btn.medium.orange.selected {
    background-color: #F5580A;
    box-shadow: 0 0 0 3px #BB3E00 inset, 0 -2px 1px 2px #FF6F28 inset, 0 10px rgba(1, 1, 1, 0.12) inset;
}
.activity .btn.medium {
	background: url(/sample-activities/service/util/cp/curriculum/images/Button_icons_retina_medium.png) no-repeat scroll 100px 0 transparent;
	background-size: 100px 50px;
    border: 3px solid #FFFFFF;
    height: 59px;
    width: 59px;
}
.activity .btn.medium.btn > img {
    display: block;
    height: 60px;
    left: -3px;
    position: absolute;
    top: 0;
    -webkit-transition: all 100ms ease-in 0s;
    -moz-transition: all 100ms ease-in 0s;
    transition: all 100ms ease-in 0s;
    width: 60px;
    max-width: none;
}
.activity .btn.medium.btn:active > img,
.activity .btn.medium.btn.active > img,
.activity .btn.medium.btn.selected > img {
    top: 1px;
}
.activity .btn.large {
    background: url(/sample-activities/service/util/cp/curriculum/images/Button_icons_retina_large.png) no-repeat scroll 0 0 transparent;
    background-size: 900px 75px;
    border: 4px solid #FFFFFF;
    height: 75px;
    width: 75px;
}
.activity .btn.large.prev {
    background-position: -5px center;
    border-color: #A7D8FF;
}
.activity .btn.large.prev:active,
.activity .btn.large.prev.active,
.activity .btn.large.prev.selected {
	background-position: -5px -2px;
}
.activity .btn.large.next {
	background-position: -75px center;
	border-color: #A7D8FF;
}
.activity .correct > .btn.large.next {
	-webkit-animation: pulse 1s ease infinite;
	-moz-animation: pulse 1s ease infinite;
	animation: pulse 1s ease infinite;
    background-color: #0EC518;
    background-position: -677px center;
    border-color: #7AEB80;
    box-shadow: 0 -2px 0 3px #02930A inset, 0 -3px 1px 3px #14E01F inset, 0 15px rgba(255, 255, 255, 0.25) inset;
}
.activity .correct > .btn.large.next:hover {
    background-color: #00D50C;
    box-shadow: 0 -2px 0 3px #00A209 inset, 0 -3px 1px 3px #36EE40 inset, 0 15px rgba(255, 255, 255, 0.32) inset;
}
.activity .correct > .btn.large.next:active {
	background-position: -677px -2px;
    background-color: #00B70A;
    box-shadow: 0 1px 0 3px #007B07 inset, 0 -3px 1px 3px #19AA21 inset, 0 17px rgba(1, 1, 1, 0.08) inset;
}
.activity .btn.large.next:active,
.activity .btn.large.next.active,
.activity .btn.large.next.selected {
	background-position: -75px -2px;
}
.activity .btn.large.answer {
    background-position: -153px center;
    border-color: #FEDC90;
}
.activity .btn.large.yellow.answer:after {
    border-radius: 100% 100% 100% 100%;
    bottom: -4px;
    box-shadow: 0 2px 2px rgba(1, 1, 1, 0.2);
    content: " ";
    left: -4px;
    position: absolute;
    right: -4px;
    top: -4px;
}
.activity .btn.large.answer:active,
.activity .btn.large.answer.active,
.activity .btn.large.answer.selected {
    background-position: -153px -2px;
}
.activity .btn.large.close {
    background-position: -375px center;
}
.activity .btn.large.close:active,
.activity .btn.large.close.active,
.activity .btn.large.close.selected {
	background-position: -375px -2px;
}
.activity .btn.large.go,
.activity .btn.large.finish {
    background-position: -303px center;
}
.activity .btn.large.go:active,
.activity .btn.large.go.active,
.activity .btn.large.go.selected,
.activity .btn.large.finish:active,
.activity .btn.large.finish.active,
.activity .btn.large.finish.selected {
    background-position: -300px 2px;
}
.activity .btn.large.finish {
    border-color: #9EE0A2;
}
.activity .btn.large.blue {
    background-color: #0390F4;
    box-shadow: 0 -2px 0 3px #0869AF inset, 0 -3px 1px 3px #2FA9FF inset, 0 15px rgba(255, 255, 255, 0.25) inset;
}
.activity .btn.large.blue:hover {
    background-color: #0B9AFF;
    box-shadow: 0 -2px 0 3px #0072C4 inset, 0 -3px 1px 3px #40B0FF inset, 0 15px rgba(255, 255, 255, 0.25) inset;
}
.activity .btn.large.blue:active,
.activity .btn.large.blue.active,
.activity .btn.large.blue.selected {
    background-color: #0488E6;
    box-shadow: 0 1px 0 3px #0060A4 inset, 0 -3px 1px 3px #2184CB inset, 0 17px rgba(1, 1, 1, 0.08) inset;
}
.activity .btn.large.yellow {
    background-color: #FFC334;
    box-shadow: 0 -2px 0 3px #CD9922 inset, 0 -3px 1px 3px #FFDB89 inset, 0 15px rgba(255, 255, 255, 0.32) inset;
}
.activity .btn.large.yellow:hover {
    background-color: #FECE61;
    box-shadow: 0 -2px 0 3px #DA9F18 inset, 0 -3px 1px 3px #FFE099 inset, 0 15px rgba(255, 255, 255, 0.32) inset;
}
.activity .btn.large.yellow:active,
.activity .btn.large.yellow.active,
.activity .btn.large.yellow.selected {
    background-color: #F8B928;
    box-shadow: 0 1px 0 3px #C69421 inset, 0 -3px 1px 3px #F9AE00 inset, 0 17px rgba(1, 1, 1, 0.08) inset;
}
.activity .btn.large.red {
    background-color: #E53030;
    box-shadow: 0 -2px 0 3px #A30000 inset, 0 -3px 1px 3px #F76F6F inset, 0 15px rgba(255, 255, 255, 0.25) inset;
}
.activity .btn.large.red:hover {
    background-color: #F54747;
    box-shadow: 0 -2px 0 3px #B80000 inset, 0 -3px 1px 3px #FC8C8C inset, 0 15px rgba(255, 255, 255, 0.32) inset;
}
.activity .btn.large.red:active,
.activity .btn.large.red.active,
.activity .btn.large.red.selected {
    background-color: #D51E1E;
    box-shadow: 0 1px 0 3px #6C0000 inset, 0 -3px 1px 3px #EA2F2F inset, 0 17px rgba(1, 1, 1, 0.1) inset;
}
.activity .btn.large.green {
    background-color: #0EC518;
    box-shadow: 0 -2px 0 3px #02930A inset, 0 -3px 1px 3px #14E01F inset, 0 15px rgba(255, 255, 255, 0.25) inset;
}
.activity .btn.large.green:hover {
    background-color: #00D50C;
    box-shadow: 0 -2px 0 3px #00A209 inset, 0 -3px 1px 3px #36EE40 inset, 0 15px rgba(255, 255, 255, 0.32) inset;
}
.activity .btn.large.green:active,
.activity .btn.large.green.active,
.activity .btn.large.green.selected {
    background-color: #00B70A;
    box-shadow: 0 1px 0 3px #007B07 inset, 0 -3px 1px 3px #19AA21 inset, 0 17px rgba(1, 1, 1, 0.1) inset;
}
.activity .next_interaction.done,
.activity .next_interaction.start_interactions {
	display: block !important;
}
.activity .btn.large.green.start {
    background-position: -450px center;
    border-color: #A7F5AC;
}
.activity .btn.large.green.start:active {
    background-position: -450px -2px;
}

.activity .disabled .btn.hint,
.disabled .btn.info,
.paused .btn.info {
    display: none !important;
}

.activity .loading-wait .btn.large.green.start {
    background-image: none;
}
.activity .loading-wait .next_interaction.start_interactions:after {
    background-image: url(/sample-activities/service/util/cp/curriculum/images/loading_icon_retina.png);
    background-position: center center;
    background-size: 43px auto;
    content: " ";
    cursor: pointer;
    height: 43px;
    position: absolute;
    right: 31px;
    top: 57px;
    -webkit-transform-origin: 22px 22px 0;
    -moz-transform-origin: 22px 22px 0;
    transform-origin: 22px 22px 0;
    width: 43px;
    -webkit-animation: rotation 0.8s infinite linear;
    -moz-animation: rotation 0.8s infinite linear;
    animation: rotation 0.8s infinite linear;
}
.activity .btn.large.green.done {
    background-position: -525px center;
    border-color: #A7F5AC;
}
.activity .btn.large.green.done:active {
    background-position: -525px -2px;
}
.activity .follow_pathway .btn.large.green.done {
	border-color: #7AEB80;
    background-position: -602px center;
    -webkit-animation: pulse 1s ease infinite;
	-moz-animation: pulse 1s ease infinite;
	animation: pulse 1s ease infinite;
}
.activity .follow_pathway .btn.large.green.done:active {
    background-position: -602px -2px;
}
.activity .btn.large.restart {
    background-position: -228px center;
}
.activity .btn.large.restart:active {
    background-position: -228px -2px;
}
.activity .menu.btn {
    background-image: none;
    border: 3px solid #FFFFFF;
    border-radius: 25px;
    bottom: 87px;
    color: #FFFFFF;
    font-size: 18px;
    height: 50px;
    left: 12px;
    line-height: 40px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
    width: 150px;
}
.activity .dropdown-menu.btn {
	padding: 0 12px 0 0;
}
.activity .dropdown-menu.btn:after {
    border-color: #FFFFFF transparent;
    border-style: solid;
    border-width: 0 6px 10px;
    content: "";
    height: 0;
    margin-top: -8px;
    position: absolute;
    right: 13px;
    top: 50%;
    width: 0;
}
.activity .dropdown-menu.btn:active:after,
.activity .dropdown-menu.btn.active:after {
    margin-top: -6px;
}
.activity .dropdown-menu.btn > span {
    position: relative;
    top: 2px;
}
.activity .dropdown-menu.btn:active > span,
.activity .dropdown-menu.btn.active > span {
    top: 4px;
}
.activity .dropdown-menu.btn .dropdown {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.65);
    border: 2px solid #FFFFFF;
    border-radius: 13px 13px 13px 13px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    font-weight: normal;
    left: 0;
    list-style: none outside none;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: -4px;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: opacity -webkit-transform 200ms ease-in 0s;
    -moz-transition: opacity 200ms ease-in 0s;
    transition: opacity 200ms ease-in 0s;
}
.activity .dropdown-menu.btn .dropdown > li > a {
    display: none;
}

.activity .dropdown-menu.btn .dropdown li a {
    border-bottom: 1px solid #FFFFFF;
    color: #097AD3;
    font-size: 16px;
    padding: 2px 10px;
    text-decoration: none;
}
.activity .dropdown-menu.btn .dropdown li:last-child a {
    border: 0 none;
}
.no-touch .activity .dropdown-menu.btn .dropdown li:hover a {
    background: none repeat scroll 0 0 #FFFFFF;
}
.activity .dropdown-menu.btn.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}
.activity .dropdown-menu.btn.active .dropdown > li > a {
    display: block;
}

.activity .btn[disabled="disabled"],
.activity .btn.disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* Default interaction control button */

.interaction_controls input.noicon[type="button"] {
    background-image: none;
    border: 3px solid #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    color: #FFFFFF;
    font-size: 20px;
    height: auto;
    padding: 4px 8px 8px;
    text-indent: 0;
    width: auto;
}

.activity .question {
    left: 167px;
/*     min-height: 75px; */
    padding: 12px 14px 14px;
    position: absolute;
    top: -67px;
    z-index: 99;
}
.activity .question:after {
    background: none repeat scroll 0 0 #E7F3FF;
    border-radius: 81px 80px 80px 190px;
    bottom: 0;
    box-shadow: -2px 0 0 4px #FFFFFF inset, 0 0 0 4px #FFFFFF inset, 0 2px 2px rgba(1, 1, 1, 0.2);
    content: " ";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
    transform: skewX(-25deg);
    z-index: -1;
}
.activity .question .question-wrapper {
    display: inline-block;
    font-size: 19px;
    line-height: 22px;
    text-align: center;
    vertical-align: middle;
    width: 418px;
}
.activity .question .question-wrapper.large-font {
    font-size: 26px;
}

/* exit button prompt */

.prompt_container.popup .title {
	font-size: 26px;
	margin-top: 0px;
	margin-bottom: 30px;
	line-height: normal;
}

.prompt_container.popup {
	height:240px;
	text-align: center;
}

.prompt_container.popup .content > * {
	display: inline-block;
	vertical-align: middle;
	margin-left: 30px;
	margin-right: 30px;
}

.prompt_container.popup .content > input[type="text"] {
	margin-bottom: 15px;
	padding: 8px 10px;
	font-size: 20px;
	width: 260px;
}

.prompt_container.popup .sub-title {
	font-size: 22px;
	margin-top: 34px;
	width: 330px;
}
.prompt_container.popup .sub-title.tall {
  margin-top: 14px;
  margin-bottom: 20px;
}

.prompt_container.popup input.noicon {
	border-radius: 40px !important;
	margin: 0 0 6px;
	background-image: none;
	border: 3px solid #FFF;
	border-radius: 10px;
	color: #FFF;
	font-size: 20px;
	height: auto;
	padding: 4px 18px 8px;
	text-indent: 0;
	margin: 0 10px;
	width: auto;
}

.prompt_container.popup input#saveProg,
.prompt_container.popup input#confirmExit {
	margin: 30px 20px;
}

/*Animations for correct and wrong submit*/

@-webkit-keyframes activity-errors {
  0% { -webkit-transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); }
  20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); }
  100% { -webkit-transform: translateX(0); }
}

@-moz-keyframes activity-errors {
  0% { -moz-transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-10px); }
  20%, 40%, 60%, 80% { -moz-transform: translateX(10px); }
  100% { -moz-transform: translateX(0); }
}

@keyframes activity-errors {
  0% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

@-webkit-keyframes activity-no-errors {
  0% { -webkit-transform: scale(1); }
  10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); }
  100% { -webkit-transform: scale(1) rotate(0); }
}

@-moz-keyframes activity-no-errors {
  0% { -moz-transform: scale(1); }
  10%, 20% { -moz-transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { -moz-transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { -moz-transform: scale(1.1) rotate(-3deg); }
  100% { -moz-transform: scale(1) rotate(0); }
}

@keyframes activity-no-errors {
  0% { transform: scale(1); }
  10%, 20% { transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}

.activity-errors {
  -webkit-animation: activity-errors backwards 1s;
  -moz-animation: activity-errors backwards 1s;
  animation: activity-errors backwards 1s;
}

.activity-no-errors {
  -webkit-animation: activity-no-errors backwards 1s;
  -moz-animation: activity-no-errors backwards 1s;
  animation: activity-no-errors backwards 1s;
}


/* Character Animations */

@-webkit-keyframes visible {
  0% { visibility: visible; }
  100% { visibility: visible; }
}
@-moz-keyframes visible {
  0% { visibility: visible; }
  100% { visibility: visible; }
}
@keyframes visible {
  0% { visibility: visible; }
  100% { visibility: visible; }
}

@-webkit-keyframes fade-in {
	0% { opacity: 0; }
	100% { opacity: 1;}
}
@-moz-keyframes fade-in {
	0% { opacity: 0; }
	100% { opacity: 1;}
}
@keyframes fade-in {
	0% { opacity: 0; }
	100% { opacity: 1;}
}

@-webkit-keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0;}
}
@-moz-keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0;}
}
@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0;}
}

.transition-in.fade {
    -webkit-animation: fade-in 0.5s backwards 1;
    animation: fade-in 0.5s backwards 1;
}

.transition-out.fade {
    -webkit-animation: fade-out 0.5s backwards 1;
    animation: fade-out 0.5s backwards 1;
}

@-webkit-keyframes rotate {
  0% { -webkit-transform: rotate(0); }
  12.5% { -webkit-transform: rotate(45deg); }
  25% { -webkit-transform: rotate(90deg); }
  37.5% { -webkit-transform: rotate(135deg); }
  50% { -webkit-transform: rotate(180deg); }
  62.5% { -webkit-transform: rotate(225deg); }
  75% { -webkit-transform: rotate(270deg); }
  87.5% { -webkit-transform: rotate(315deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rotate {
  0% { -moz-transform: rotate(0); }
  12.5% { -moz-transform: rotate(45deg); }
  25% { -moz-transform: rotate(90deg); }
  37.5% { -moz-transform: rotate(135deg); }
  50% { -moz-transform: rotate(180deg); }
  62.5% { -moz-transform: rotate(225deg); }
  75% { -moz-transform: rotate(270deg); }
  87.5% { -moz-transform: rotate(315deg); }
  100% { -moz-transform: rotate(360deg); }
}
@keyframes rotate {
  0% { transform: rotate(0); }
  12.5% { transform: rotate(45deg); }
  25% { transform: rotate(90deg); }
  37.5% { transform: rotate(135deg); }
  50% { transform: rotate(180deg); }
  62.5% { transform: rotate(225deg); }
  75% { transform: rotate(270deg); }
  87.5% { transform: rotate(315deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes fill1-blink {
  0%, 6%, 100% { height: 30px; }
  3% { height: 50px; }
}
@-moz-keyframes fill1-blink {
  0%, 6%, 100% { height: 30px; }
  3% { height: 50px; }
}
@keyframes fill1-blink {
  0%, 6%, 100% { height: 30px; }
  3% { height: 50px; }
}

@-webkit-keyframes fill2-body {
  from { background-position: -700px -100px; }
  to { background-position: -700px -1300px; }
}
@-moz-keyframes fill2-body {
  from { background-position: -700px -100px; }
  to { background-position: -700px -1300px; }
}
@keyframes fill2-body {
  from { background-position: -700px -100px; }
  to { background-position: -700px -1300px; }
}

@-webkit-keyframes newquestion1-beak {
  from { background-position: -200px -800px; }
  to { background-position: -200px -1000px; }
}
@-moz-keyframes newquestion1-beak {
  from { background-position: -200px -800px; }
  to { background-position: -200px -1000px; }
}
@keyframes newquestion1-beak {
  from { background-position: -200px -800px; }
  to { background-position: -200px -1000px; }
}

@-webkit-keyframes newquestion1-blink {
  0%, 6%, 100% { height: 30px; }
  3% { height: 50px; }
}
@-moz-keyframes newquestion1-blink {
  0%, 6%, 100% { height: 30px; }
  3% { height: 50px; }
}
@keyframes newquestion1-blink {
  0%, 6%, 100% { height: 30px; }
  3% { height: 50px; }
}

@-webkit-keyframes newquestion1-wing-right {
  0%, 100% { -webkit-transform: rotate(0deg); }
  50% { -webkit-transform: rotate(15deg); }
}
@-moz-keyframes newquestion1-wing-right {
  0%, 100% { -moz-transform: rotate(0deg); }
  50% { -moz-transform: rotate(15deg); }
}
@keyframes newquestion1-wing-right {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(15deg); }
}

@-webkit-keyframes newquestion2-wing-right {
  from { background-position: -200px -1700px; }
  to { background-position: -200px -1900px; }
}
@-moz-keyframes newquestion2-wing-right {
  from { background-position: -200px -1700px; }
  to { background-position: -200px -1900px; }
}
@keyframes newquestion2-wing-right {
  from { background-position: -200px -1700px; }
  to { background-position: -200px -1900px; }
}

@-webkit-keyframes newquestion2-blink {
  0%, 6%, 100% { height: 30px; }
  3% { height: 50px; }
}
@-moz-keyframes newquestion2-blink {
  0%, 6%, 100% { height: 30px; }
  3% { height: 50px; }
}
@keyframes newquestion2-blink {
  0%, 6%, 100% { height: 30px; }
  3% { height: 50px; }
}

@-webkit-keyframes correct1 {
  0%, 100% { -webkit-transform: rotate(10deg); }
  50% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes correct1 {
  0%, 100% { -moz-transform: rotate(10deg); }
  50% { -moz-transform: rotate(0deg); }
}
@keyframes correct1 {
  0%, 100% { transform: rotate(10deg); }
  50% { transform: rotate(0deg); }
}

@-webkit-keyframes correct1-wing-right {
  0%, 100% { -webkit-transform: rotate(10deg); }
  50% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes correct1-wing-right {
  0%, 100% { -moz-transform: rotate(10deg); }
  50% { -moz-transform: rotate(0deg); }
}
@keyframes correct1-wing-right {
  0%, 100% { transform: rotate(10deg); }
  50% { transform: rotate(0deg); }
}

@-webkit-keyframes correct1-wing-left {
  0%, 100% { -webkit-transform: rotate(-10deg); }
  50% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes correct1-wing-left {
  0%, 100% { -moz-transform: rotate(-10deg); }
  50% { -moz-transform: rotate(0deg); }
}
@keyframes correct1-wing-left {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(0deg); }
}

@-webkit-keyframes correct1-wing-right-change {
  from { background-position: -300px -2700px; }
  to { background-position: -300px -3100px; }
}
@-moz-keyframes correct1-wing-right-change {
  from { background-position: -300px -2700px; }
  to { background-position: -300px -3100px; }
}
@keyframes correct1-wing-right-change {
  from { background-position: -300px -2700px; }
  to { background-position: -300px -3100px; }
}

@-webkit-keyframes correct1-wing-left-change {
  from { background-position: -300px -2300px; }
  to { background-position: -300px -2700px; }
}
@-moz-keyframes correct1-wing-left-change {
  from { background-position: -300px -2300px; }
  to { background-position: -300px -2700px; }
}
@keyframes correct1-wing-left-change {
  from { background-position: -300px -2300px; }
  to { background-position: -300px -2700px; }
}

@-webkit-keyframes correct1-blink {
  0%, 6%, 100% { height: 25px; }
  3% { height: 45px; }
}
@-moz-keyframes correct1-blink {
  0%, 6%, 100% { height: 25px; }
  3% { height: 45px; }
}
@keyframes correct1-blink {
  0%, 6%, 100% { height: 25px; }
  3% { height: 45px; }
}

@-webkit-keyframes correct2-body {
  from { background-position: -900px -100px; }
  to { background-position: -900px -900px; }
}
@-moz-keyframes correct2-body {
  from { background-position: -900px -100px; }
  to { background-position: -900px -900px; }
}
@keyframes correct2-body {
  from { background-position: -900px -100px; }
  to { background-position: -900px -900px; }
}

@-webkit-keyframes correct2-wing-right {
  0% { visibility: visible; -webkit-transform: rotate(10deg); }
  100% { visibility: visible; -webkit-transform: rotate(0deg); }
}
@-moz-keyframes correct2-wing-right {
  0% { visibility: visible; -moz-transform: rotate(10deg); }
  100% { visibility: visible; -moz-transform: rotate(0deg); }
}
@keyframes correct2-wing-right {
  0% { visibility: visible; transform: rotate(10deg); }
  100% { visibility: visible; transform: rotate(0deg); }
}

@-webkit-keyframes correct2-wing-left {
  0% { visibility: visible; -webkit-transform: rotate(-20deg); }
  100% { visibility: visible; -webkit-transform: rotate(-10deg); }
}
@-moz-keyframes correct2-wing-left {
  0% { visibility: visible; -moz-transform: rotate(-20deg); }
  100% { visibility: visible; -moz-transform: rotate(-10deg); }
}
@keyframes correct2-wing-left {
  0% { visibility: visible; transform: rotate(-20deg); }
  100% { visibility: visible; transform: rotate(-10deg); }
}

@-webkit-keyframes correct2-wing-right-change {
  from { background-position: -900px -1400px; }
  to { background-position: -900px -1700px; }
}
@-moz-keyframes correct2-wing-right-change {
  from { background-position: -900px -1400px; }
  to { background-position: -900px -1700px; }
}
@keyframes correct2-wing-right-change {
  from { background-position: -900px -1400px; }
  to { background-position: -900px -1700px; }
}

@-webkit-keyframes correct2-wing-left-change {
  from { background-position: -900px -1000px; }
to { background-position: -900px -1300px; }
}
@-moz-keyframes correct2-wing-left-change {
  from { background-position: -900px -1000px; }
to { background-position: -900px -1300px; }
}
@keyframes correct2-wing-left-change {
  from { background-position: -900px -1000px; }
to { background-position: -900px -1300px; }
}

@-webkit-keyframes wrong1-beak {
  from { background-position: -400px -1000px; }
  to { background-position: -400px -1300px; }
}
@-moz-keyframes wrong1-beak {
  from { background-position: -400px -1000px; }
  to { background-position: -400px -1300px; }
}
@keyframes wrong1-beak {
  from { background-position: -400px -1000px; }
  to { background-position: -400px -1300px; }
}

@-webkit-keyframes wrong1-blink {
  0%, 6%, 100% { height: 30px; }
  3% { height: 50px; }
}
@-moz-keyframes wrong1-blink {
  0%, 6%, 100% { height: 30px; }
  3% { height: 50px; }
}
@keyframes wrong1-blink {
  0%, 6%, 100% { height: 30px; }
  3% { height: 50px; }
}

@-webkit-keyframes wrong1-question {
  0%, 10%, 20%, 30%, 100% { opacity: 0; -webkit-transform: scale(0.6); }
  5%, 15%, 25%, 35%, 95% { opacity: 1; -webkit-transform: scale(1); }
}
@-moz-keyframes wrong1-question {
  0%, 10%, 20%, 30%, 100% { opacity: 0; -moz-transform: scale(0.6); }
  5%, 15%, 25%, 35%, 95% { opacity: 1; -moz-transform: scale(1); }
}
@keyframes wrong1-question {
  0%, 10%, 20%, 30%, 100% { opacity: 0; transform: scale(0.6); }
  5%, 15%, 25%, 35%, 95% { opacity: 1; transform: scale(1); }
}

@-webkit-keyframes wrong2-body {
  from { background-position: -1000px -100px; }
  to { background-position: -1000px -300px; }
}
@-moz-keyframes wrong2-body {
  from { background-position: -1000px -100px; }
  to { background-position: -1000px -300px; }
}
@keyframes wrong2-body {
  from { background-position: -1000px -100px; }
  to { background-position: -1000px -300px; }
}

@-webkit-keyframes wrong2-beak {
  from { background-position: -1000px -300px; }
  to { background-position: -1000px -500px; }
}
@-moz-keyframes wrong2-beak {
  from { background-position: -1000px -300px; }
  to { background-position: -1000px -500px; }
}
@keyframes wrong2-beak {
  from { background-position: -1000px -300px; }
  to { background-position: -1000px -500px; }
}

@-webkit-keyframes wrong2-blink {
  0%, 6%, 100% { height: 30px; }
  3% { height: 50px; }
}
@-moz-keyframes wrong2-blink {
  0%, 6%, 100% { height: 30px; }
  3% { height: 50px; }
}
@keyframes wrong2-blink {
  0%, 6%, 100% { height: 30px; }
  3% { height: 50px; }
}

@-webkit-keyframes wrong2-wing-left {
  from { visibility: visible; background-position: -1000px -600px; }
  to { visibility: visible; background-position: -1000px -800px; }
}
@-moz-keyframes wrong2-wing-left {
  from { visibility: visible; background-position: -1000px -600px; }
  to { visibility: visible; background-position: -1000px -800px; }
}
@keyframes wrong2-wing-left {
  from { visibility: visible; background-position: -1000px -600px; }
  to { visibility: visible; background-position: -1000px -800px; }
}

@-webkit-keyframes timer1-blink {
  0%, 10%, 20%, 100% { height: 30px; }
  5%, 15% { height: 50px; }
}
@-moz-keyframes timer1-blink {
  0%, 10%, 20%, 100% { height: 30px; }
  5%, 15% { height: 50px; }
}
@keyframes timer1-blink {
  0%, 10%, 20%, 100% { height: 30px; }
  5%, 15% { height: 50px; }
}

@-webkit-keyframes timer1-eyes {
  0%, 30%, 100% {top: -18px; }
  40%, 90% { top: -14px; }
}
@-moz-keyframes timer1-eyes {
  0%, 30%, 100% {top: -18px; }
  40%, 90% { top: -14px; }
}
@keyframes timer1-eyes {
  0%, 30%, 100% {top: -18px; }
  40%, 90% { top: -14px; }
}

@-webkit-keyframes timer1-clock {
  0% { -webkit-transform: rotate(10deg); }
  50%, 100% { -webkit-transform: rotate(-10deg); }
}
@-moz-keyframes timer1-clock {
  0% { -moz-transform: rotate(10deg); }
  50%, 100% { -moz-transform: rotate(-10deg); }
}
@keyframes timer1-clock {
  0% { transform: rotate(10deg); }
  50%, 100% { transform: rotate(-10deg); }
}

@-webkit-keyframes timer2-body {
  from { background-position: -1100px -600px; }
  to { background-position: -1100px -800px; }
}
@-moz-keyframes timer2-body {
  from { background-position: -1100px -600px; }
  to { background-position: -1100px -800px; }
}
@keyframes timer2-body {
  from { background-position: -1100px -600px; }
  to { background-position: -1100px -800px; }
}

.parrot.character,
.parrot.character * {
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  position: relative;
}
.parrot.character {
  display: inline-block;
  height: 75px;
  margin: -10px 5px -18px -20px;
  vertical-align: middle;
  width: 75px;
}
.parrot.character > span {
  background-image: url("/sample-activities/service/util/cp/curriculum/images/parrot_compiled.png");
  background-repeat: no-repeat;
  height: 100px;
  left: -17px;
  position: absolute;
  top: -16px;
  width: 100px;
}
.parrot.character > span.circle {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  background: none repeat scroll 0 0 #FFE787;
  border: 5px solid #FFFFFF;
  border-radius: 100%;
  box-shadow: 0 0 1px #AB8800 inset, 0 0 4px #FFCB00 inset, 0 0 3px rgba(0, 0, 0, 0.5);
  height: 75px;
  left: 50%;
  margin-left: -45px;
  margin-top: -45px;
  top: 50%;
  width: 75px;
}

.parrot.character.fill1 .body {
  background-position: -100px -100px;
}
.parrot.character.fill1 .blink {
  background-position: -100px -500px;
  height: 30px;
  -webkit-animation: fill1-blink 8s infinite;
  -moz-animation: fill1-blink 8s infinite;
  animation: fill1-blink 8s infinite;
}
.parrot.character.fill1 .beak {
  background-position: -100px -800px;
}

.parrot.character.fill2 .body {
  background-position: -700px -100px;
  -webkit-animation: fill2-body 1.5s steps(12) 1 normal;
  -moz-animation: fill2-body 1.5s steps(12) 1 normal;
  animation: fill2-body 1.5s steps(12) 1 normal;
}

.parrot.character.new-question1 .body {
  background-position: -200px -200px;
}
.parrot.character.new-question1 .blink {
  background-position: -200px -600px;
  -webkit-animation: newquestion1-blink 8s infinite;
  -moz-animation: newquestion1-blink 8s infinite;
  animation: newquestion1-blink 8s infinite;
}
.parrot.character.new-question1 .beak {
  background-position: -200px -800px;
}
.parrot.character.new-question1 .wing-right {
  background-position: -200px -1700px;
  left: auto;
  right: -55px;
  -webkit-animation: newquestion1-wing-right 4s infinite ease;
  -moz-animation: newquestion1-wing-right 4s infinite ease;
  animation: newquestion1-wing-right 4s infinite ease;
  -webkit-transform-origin: left center 0;
  -moz-transform-origin: left center 0;
  transform-origin: left center 0;
}

.parrot.character.new-question2 .body {
  background-position: -200px -200px;
}
.parrot.character.new-question2 .blink {
  background-position: -200px -600px;
  -webkit-animation: newquestion2-blink 8s infinite;
  -moz-animation: newquestion2-blink 8s infinite;
  animation: newquestion2-blink 8s infinite;
}
.parrot.character.new-question2 .beak {
  background-position: -200px -800px;

}
.parrot.character.new-question2 .wing-right {
  background-position: -200px -1700px;
  left: auto;
  right: -55px;
  -webkit-animation: newquestion2-wing-right .4s steps(2) 4,
    newquestion1-wing-right 4s 2.4s infinite ease;
  -moz-animation: newquestion2-wing-right .4s steps(2) 4,
    newquestion1-wing-right 4s 2.4s infinite ease;
  animation: newquestion2-wing-right .4s steps(2) 4,
    newquestion1-wing-right 4s 2.4s infinite ease;
  -webkit-transform-origin: left center 0;
  -moz-transform-origin: left center 0;
  transform-origin: left center 0;
}

.parrot.character.correct1 {
  -webkit-animation: correct1 1.2s infinite linear;
  -moz-animation: correct1 1.2s infinite linear;
  animation: correct1 1.2s infinite linear;
}
.parrot.character.correct1 .body {
  background-position: -300px -400px;
}
.parrot.character.correct1 .beak {
  /* background-position: -100px -805px; */
  background-position: -300px -1300px;
}
.parrot.character.correct1 .wing-right {
  background-position: -300px -2700px;
  left: auto;
  right: -45px;
  -webkit-animation: correct1-wing-right 1s infinite linear,
             correct1-wing-right-change .3s steps(4) infinite alternate;
  -moz-animation: correct1-wing-right 1s infinite linear,
 			 correct1-wing-right-change .3s steps(4) infinite alternate;
  animation: correct1-wing-right 1s infinite linear,
 			 correct1-wing-right-change .3s steps(4) infinite alternate;
  -webkit-transform-origin: left center 0;
  -moz-transform-origin: left center 0;
  transform-origin: left center 0;
}
.parrot.character.correct1 .wing-left {
  background-position: -300px -2300px;
  left: -45px;
  -webkit-animation: correct1-wing-left 1s infinite linear,
             correct1-wing-left-change .3s steps(4) infinite alternate;
  -moz-animation: correct1-wing-left 1s infinite linear,
             correct1-wing-left-change .3s steps(4) infinite alternate;
  animation: correct1-wing-left 1s infinite linear,
             correct1-wing-left-change .3s steps(4) infinite alternate;
  -webkit-transform-origin: right center 0;
  -moz-transform-origin: right center 0;
  transform-origin: right center 0;
}
.parrot.character.correct1 .blink {
  background-position: -300px -1800px;
  height: 25px;
  -webkit-animation: correct1-blink 4s infinite;
  -moz-animation: correct1-blink 4s infinite;
  animation: correct1-blink 4s infinite;
}

.parrot.character.correct2 {
  -webkit-animation: correct1 1.2s infinite linear;
  -moz-animation: correct1 1.2s infinite linear;
  animation: correct1 1.2s infinite linear;
}
.parrot.character.correct2 .body {
  background-position: -900px -100px;
  -webkit-animation: correct2-body .6s steps(8) 1 forwards;
  -moz-animation: correct2-body .6s steps(8) 1 forwards;
  animation: correct2-body .6s steps(8) 1 forwards;
}
.parrot.character.correct2 .beak {
  background-position: -300px -1300px;
  visibility: hidden;
  -webkit-animation: visible .1s .6s 1 forwards;
  -moz-animation: visible .1s .6s 1 forwards;
  animation: visible .1s .6s 1 forwards;
}
.parrot.character.correct2 .wing-right {
  visibility: hidden;
  background-position: -900px -1400px;
  left: auto;
  right: -50px;
  -webkit-animation: correct2-wing-right .4s .6s 1 linear forwards,
             correct2-wing-right-change .3s .6s steps(3) 1 forwards;
  -moz-animation: correct2-wing-right .4s .6s 1 linear forwards,
             correct2-wing-right-change .3s .6s steps(3) 1 forwards;
  animation: correct2-wing-right .4s .6s 1 linear forwards,
             correct2-wing-right-change .3s .6s steps(3) 1 forwards;
  -webkit-transform-origin: left center 0;
  -moz-transform-origin: left center 0;
  transform-origin: left center 0;
}
.parrot.character.correct2 .wing-left {
  visibility: hidden;
  background-position: -900px -1000px;
  left: -55px;
  -webkit-animation: correct2-wing-left .4s .6s 1 linear forwards,
             correct2-wing-left-change .3s .6s steps(3) 1 forwards;
  -moz-animation: correct2-wing-left .4s .6s 1 linear forwards,
             correct2-wing-left-change .3s .6s steps(3) 1 forwards;
  animation: correct2-wing-left .4s .6s 1 linear forwards,
             correct2-wing-left-change .3s .6s steps(3) 1 forwards;
  -webkit-transform-origin: right center 0;
  -moz-transform-origin: right center 0;
  transform-origin: right center 0;
}
.parrot.character.correct2 .blink {
  background-position: -300px -1800px;
  height: 25px;
  -webkit-animation: correct1-blink 4s infinite;
  -moz-animation: correct1-blink 4s infinite;
  animation: correct1-blink 4s infinite;
}

.parrot.character.wrong1 .body {
  background-position: -400px -300px;
}
.parrot.character.wrong1 .blink {
  background-position: -400px -700px;
  height: 30px;
  -webkit-animation: wrong1-blink 8s infinite;
  -moz-animation: wrong1-blink 8s infinite;
  animation: wrong1-blink 8s infinite;
}
.parrot.character.wrong1 .beak {
  background-position: -400px -1000px;
  -webkit-animation: wrong1-beak .6s steps(3) infinite;
  -moz-animation: wrong1-beak .6s steps(3) infinite;
  animation: wrong1-beak .6s steps(3) infinite;
}
.parrot.character.wrong1 .question-mark {
  background-position: -400px -1400px;
  left: -20px;
  top: -54px;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
  -webkit-animation: wrong1-question 7s infinite;
  -moz-animation: wrong1-question 7s infinite;
  animation: wrong1-question 7s infinite;
}

.parrot.character.wrong2 .body {
  background-position: -1000px -100px;
  -webkit-animation: wrong2-body 3.2s steps(2) 1;
  -moz-animation: wrong2-body 3.2s steps(2) 1;
  animation: wrong2-body 3.2s steps(2) 1;
}
.parrot.character.wrong2 .blink {
  background-position: -1000px -400px;
  height: 30px;
  -webkit-animation: wrong2-blink 8s infinite;
  -moz-animation: wrong2-blink 8s infinite;
  animation: wrong2-blink 8s infinite;
}
.parrot.character.wrong2 .beak {
  background-position: -1000px -300px;
  -webkit-animation: wrong2-beak 3s steps(2) 1;
  -moz-animation: wrong2-beak 3s steps(2) 1;
  animation: wrong2-beak 3s steps(2) 1;
}
.parrot.character.wrong2 .wing-left {
  z-index: 99;
  visibility: hidden;
  background-position: -1000px -600px;
  -webkit-animation: wrong2-wing-left .4s 1.6s steps(2) 4 forwards;
  -moz-animation: wrong2-wing-left .4s 1.6s steps(2) 4 forwards;
  animation: wrong2-wing-left .4s 1.6s steps(2) 4 forwards;
}
.parrot.character.wrong2 .wing-right {
  left: -18px;
  top: -18px;
  z-index: 99;
  visibility: hidden;
  background-position: -400px -1000px;
  -webkit-animation: wrong1-beak .6s steps(3) infinite,
             visible .4s 4s 1 linear forwards;
  -moz-animation: wrong1-beak .6s steps(3) infinite,
             visible .4s 4s 1 linear forwards;
  animation: wrong1-beak .6s steps(3) infinite,
             visible .4s 4s 1 linear forwards;
}
.parrot.character.wrong2 .question-mark {
  background-position: -400px -1400px;
  left: -20px;
  top: -54px;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
  -webkit-animation: wrong1-question 7s infinite;
  -moz-animation: wrong1-question 7s infinite;
  animation: wrong1-question 7s infinite;
}

.parrot.character.timer1 .body {
  background-position: -500px -1900px;
}
.parrot.character.timer1 .eyes {
  left: -16px;
  top: -18px;
  background-position: -500px -3100px;
  -webkit-animation: timer1-eyes 4s infinite;
  -moz-animation: timer1-eyes 4s infinite;
  animation: timer1-eyes 4s infinite;
}
.parrot.character.timer1 .blink {
  background-position: -500px -2200px;
  height: 30px;
  -webkit-animation: timer1-blink 3s infinite;
  -moz-animation: timer1-blink 3s infinite;
  animation: timer1-blink 3s infinite;
}
.parrot.character.timer1 .beak {
  background-position: -500px -2000px;
}
.parrot.character.timer1 .clock {
  background-position: -500px -2100px;
  left: -10px;
  top: 11px;
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  transform: rotate(-10deg);
  -webkit-animation: timer1-clock .7s 1 linear;
  -moz-animation: timer1-clock .7s 1 linear;
  animation: timer1-clock .7s 1 linear;
  -webkit-transform-origin: left center 0;
  -moz-transform-origin: left center 0;
  transform-origin: left center 0;
}
.parrot.character.timer1 .clock > i {
  -webkit-animation: rotate 5s infinite cubic-bezier(0.05, 0.95, 0.05, 0.95);
  -moz-animation: rotate 5s infinite cubic-bezier(0.05, 0.95, 0.05, 0.95);
  animation: rotate 5s infinite cubic-bezier(0.05, 0.95, 0.05, 0.95);
  background: none repeat scroll 0 0 #FF0000;
  height: 13px;
  left: 45px;
  position: absolute;
  top: 48px;
  -webkit-transform-origin: center bottom 0;
  -moz-transform-origin: center bottom 0;
  transform-origin: center bottom 0;
  width: 1px;
}

.parrot.character.timer2 {
  -webkit-animation: correct1.25s 5 linear forwards;
  -moz-animation: correct1.25s 5 linear forwards;
  animation: correct1.25s 5 linear forwards;
}
.parrot.character.timer2 .body {
  background-position: -1100px -100px;
  -webkit-animation: timer2-body 1.25s steps(2) 3;
  -moz-animation: timer2-body 1.25s steps(2) 3;
  animation: timer2-body 1.25s steps(2) 3;
}
.parrot.character.timer2 .eyes {
  visibility: hidden;
  background-position: -500px -3100px;
  -webkit-animation: timer1-eyes 4s infinite,
              visible .1s 3.75s 1 forwards;
  -moz-animation: timer1-eyes 4s infinite,
              visible .1s 3.75s 1 forwards;
  animation: timer1-eyes 4s infinite,
              visible .1s 3.75s 1 forwards;
}
.parrot.character.timer2 .blink {
  visibility: hidden;
  background-position: -500px -2200px;
  height: 30px;
  -webkit-animation: timer1-blink 3s infinite,
              visible .1s 3.75s 1 forwards;
  -moz-animation: timer1-blink 3s infinite,
              visible .1s 3.75s 1 forwards;
  animation: timer1-blink 3s infinite,
              visible .1s 3.75s 1 forwards;
}
.parrot.character.timer2 .beak {
  visibility: hidden;
  background-position: -500px -2000px;
  -webkit-animation: visible .1s 3.75s 1 forwards;
  -moz-animation: visible .1s 3.75s 1 forwards;
  animation: visible .1s 3.75s 1 forwards;
}
.parrot.character.timer2 .clock {
  background-position: -500px -2100px;
  left: -9px;
  top: 9px;
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  transform: rotate(-10deg);
  animation: timer1-clock .7s 1 linear;
  -webkit-transform-origin: left center 0;
  -moz-transform-origin: left center 0;
  transform-origin: left center 0;
}
.parrot.character.timer2 .clock > i {
  -webkit-animation: rotate 5s infinite cubic-bezier(0.05, 0.95, 0.05, 0.95);
  -moz-animation: rotate 5s infinite cubic-bezier(0.05, 0.95, 0.05, 0.95);
  animation: rotate 5s infinite cubic-bezier(0.05, 0.95, 0.05, 0.95);
  background: none repeat scroll 0 0 #FF0000;
  height: 13px;
  left: 45px;
  position: absolute;
  top: 48px;
  -webkit-transform-origin: center bottom 0;
  -moz-transform-origin: center bottom 0;
  transform-origin: center bottom 0;
  width: 1px;
}

/* Inline Question Styles */

.activity .interaction.inline-question .question {
    background: url("/sample-activities/service/util/cp/curriculum/images/feedback_frame_new.png") repeat scroll 0 0 transparent;
    height: 309px;
    left: 50%;
    margin-left: -341px;
    position: absolute;
    top: 0;
    width: 682px;
}
.activity .arctic .interaction.inline-question .question , .activity .tundra .interaction.inline-question .question {
    background: url("/sample-activities/service/util/cp/curriculum/images/feedback_frame_ice.png") repeat scroll 0 0 transparent;
    height: 360px;
}

.activity .lab .interaction.inline-question .question {
    background: url("/sample-activities/service/util/cp/curriculum/images/lab_sum_area_bg.png") repeat scroll 0 0 transparent;
	background-position: 20px 66px;
	background-repeat: no-repeat;
    height: 360px;
}
.activity .interaction.inline-question .question:after {
    display: none;
}
.activity .interaction.inline-question .parrot.character {
    left: 132px;
    position: absolute;
    top: 152px;
    z-index: 1;
}
.activity .interaction.inline-question .parrot.character > span.circle {
    background: url("/sample-activities/service/util/cp/curriculum/images/inlay.png") no-repeat scroll 0 0 transparent;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    height: 84px;
    left: 50%;
    margin-left: -47px;
    margin-top: -48px;
    top: 50%;
    width: 84px;
}
.activity .arctic .interaction.inline-question .parrot.character > span.circle , .activity .tundra .interaction.inline-question .parrot.character > span.circle {
    background: url("/sample-activities/service/util/cp/curriculum/images/inlay_artic.png") no-repeat scroll 0 0 transparent;
}
.activity .lab .interaction.inline-question .parrot.character > span.circle {
    background: url("/sample-activities/service/util/cp/curriculum/images/lab_porthole.png") no-repeat scroll 0 0 transparent;
	width: 155px;
	height: 155px;
	top:4px;
	left:6px;
}
.activity .interaction.inline-question .question .question-wrapper {
    font-size: 2.5em;
    font-family: 'Open Sans Semibold';
    left: 192px;
    line-height: 1em;
    position: absolute;
    top: 153px;
    width: 225px;
    text-align: right;
}
.activity .lab .interaction.inline-question .question .question-wrapper {
    color: #fff;
}
.activity .interaction.inline-question .number-question {
    display: inline-block;
    position: absolute;
    right: 210px;
    top: 141px;
    vertical-align: top;
    z-index: 100;
}
.activity .interaction.inline-question .number-question > input {
    border: 2px solid #FFFFFF;
    box-shadow: 3px 3px 0 #D0D0D0 inset;
    color: #054B98;
    font-size: 2.5em !important;
    font-family: 'Open Sans Semibold';
    text-align: center;
    width: 135px;
}
.activity .interaction.inline-question .question .controls {
    bottom: auto;
    right: 96px;
    top: 74px;
}
.activity .interaction.inline-question .messages {
    left: 60px;
    top: 225px;
}

/* End Inline Question Styles */

.activity .question .controls {
    bottom: -8px;
    position: absolute;
    right: 4px;
}

.activity .messages {
    display: none;
    font-size: 19px;
    font-family: 'Open Sans Semibold';
    left: 15px;
    position: absolute;
    text-align: left;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
    top: 27px;
    width: 375px;
    z-index: 100;
}
.activity .messages:before, .activity .messages:after {
	border: 25px solid transparent;
	border-right-width: 0;
	border-bottom-color: #FFFFFF;
    content: " ";
    left: 50%;
    margin-left: -52px;
    position: absolute;
    top: -46px;
}
.activity .messages:before {
    border-width: 36px 0 36px 36px;
    margin-left: -59px;
    top: -66px;
    z-index: -1;
}
.activity .messages.no_errors:before {
    border-bottom-color: #09AA11;
}
.activity .messages.errors:before,
.activity .messages.timeout:before,
.activity .messages.rejected:before {
    border-bottom-color: #B948CC;
}
.activity .assessment:before,
.activity .assessment:after {
	display: none;
}
.activity .messages.active {
    display: block;
}

.activity .messages > * {
    display: none;
    vertical-align: top;
    min-width: 175px;
}
.activity .messages.active.no_errors > .no_errors,
.activity .messages.active.errors > .errors,
.activity .messages.active.timeout > .timeout,
.activity .messages.active.rejected > .rejected,
.activity .messages.active.assessment > .assessment {
	display: inline-block;
}
.activity .messages.no_errors .no_errors,
.activity .messages.errors .errors,
.activity .messages.timeout .timeout,
.activity .messages.rejected .rejected,
.activity .messages.assessment .assessment {
    border: 4px solid;
    outline: medium none;
    padding: 8px 16px;
}
.activity .interaction_sequence input[type="text"],
.activity .interaction_sequence input[type="number"],
.activity .interaction_sequence input[type="password"],
.activity .interaction_sequence input[type="file"],
.activity .interaction_sequence textarea,
.activity .interaction_sequence select {
    border: 2px solid #7ED2FF;
    border-radius: 6px 6px 6px 6px;
    box-shadow: none;
    font-size: 0.925em;
    outline: 0 none;
    padding: 4px 8px;
    -webkit-transition: 150ms ease all;
    -moz-transition: 150ms ease all;
    transition: 150ms ease all;
}
.activity .interaction_sequence input[type="text"]:hover,
.activity .interaction_sequence input[type="text"]:focus,
.activity .interaction_sequence input[type="number"]:hover,
.activity .interaction_sequence input[type="number"]:focus,
.activity .interaction_sequence input[type="password"]:hover,
.activity .interaction_sequence input[type="password"]:focus,
.activity .interaction_sequence input[type="file"]:hover,
.activity .interaction_sequence input[type="file"]:focus,
.activity .interaction_sequence textarea:hover,
.activity .interaction_sequence textarea:focus,
.activity .interaction_sequence select:hover,
.activity .interaction_sequence select:focus {
	border: 2px solid #2CB6FF;
}

.interaction_container {
    font-size: 0.9em;
    height: 100%;
    line-height: 1.4;
    position: relative;
}
.interaction_container * {
    font-family: 'Open Sans';
    font-weight: normal !important;
}
.interaction_container strong {
	font-family: 'Open Sans Semibold';
}
.interaction_sequence {
	background: none repeat scroll 0 0 #E7F3FF;
    border: 4px solid #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 2px 2px rgba(1, 1, 1, 0.2);
    color: #054B98;
    height: 620px;
    left: 50%;
    position: absolute;
    top: 50%;
	margin-left: -465px;
    margin-top: -310px;
    width: 930px;
}
.interaction_sequence > h1 {
    display: none;
}
.page-decorations {
    background-repeat: no-repeat;
    border: 4px solid #FFFFFF;
    border-top: 0 none;
    border-radius: 0 0 9px 9px;
    bottom: 20px;
    left: 20px;
    overflow: hidden;
    position: absolute;
    right: 20px;
    top: 37px;
}
.farmyard .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/images/ground_scene.png);
}
.jungle .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/images/jungle_scene.png);
}
.jungle2 .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/images/jungle-background.png);
}
.simple-jungle .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/images/simple-jungle-scene.png);
}
.simple-jungle2 .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/images/simple-jungle-scene2.png);
}
.crates .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/images/movement_algorithm.png);
}
.desk .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/images/desk_background.png);
}
.gate-switch .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/images/unlocking_gates_splash_page.png);
}
.cave .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/images/cave_algorithm_splash_page.png);
}
.sky .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/images/sky_scene.png);
}
.street .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/images/recycling-bg.png);
}
.undersea .page-decorations {
	background-color: #62c7f8;
    background-image: url(/sample-activities/service/util/cp/curriculum/images/undersea_combined.png);
}
.undersea .parrott-wrapper .parrott {
    background: url(/sample-activities/service/util/cp/curriculum/images/body_underthesea.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 258px;
    top: -28px;
    width: 192px;
}
.undersea .parrott-wrapper .wing {
    background: url(/sample-activities/service/util/cp/curriculum/images/wing_underthesea.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.lake .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/images/frog_background.png);
}

@-webkit-keyframes bubbling-lava {
	0% {background-position: 0 0;}
	50% {background-position: -1800px 0; visibility: visible}
	51% {background-position: -1800px 0; visibility: hidden}
	100% {background-position: -1800px 0; visibility: hidden}
}
@keyframes bubbling-lava {
	0% {background-position: 0 0;}
	50% {background-position: -3600px 0; visibility: visible}
	51% {background-position: -3600px 0; visibility: hidden}
	100% {background-position: -3600px 0; visibility: hidden}
}

.lava .page-decorations {
	background-color: #fdb40b;
    background-image: url(/sample-activities/service/util/cp/curriculum/images/lava-scene.png);
}
.lava .page-decorations:after , .lava .page-decorations:before {
	content:"";
	position: absolute;
	width: 150px;
	height: 90px;
	/* background-size: 1800px auto; */
	
	-webkit-animation-name: bubbling-lava ;
	-moz-animation-name: bubbling-lava ;
	animation-name: bubbling-lava ;
	
	-webkit-animation-duration: 4s ;
	-moz-animation-duration: 4s ;
	animation-duration: 4s ;
	
	-webkit-animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	
	-webkit-animation-timing-function: steps(24);
	-moz-animation-timing-function: steps(24);
	animation-timing-function: steps(24);
	
	background-image: url(/sample-activities/service/util/cp/curriculum/images/lava-animation-sprite.png);

}
.lava .page-decorations:before{
	top: 0px;
	left: -4px;
	
	transform: scale( 0.5 );
}
.lava .page-decorations:after{
	bottom: 166px;
	right: 169px;
	
	-webkit-animation-delay: -1s ;
	-moz-animation-delay: -1s ;
	animation-delay: -1s ;
}

.high-seas .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/images/high-seas.png);
}
.tropical .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/images/spelling.png);
}
.lake-bridge .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/images/lake-bridge.png);
}
.shop .page-decorations {
	background-color: #faebba;
    background-image: url(/sample-activities/service/util/cp/curriculum/images/shop_bg.png);
}
.shop2 .page-decorations {
	background-color: #faebba;
    background-image: url(/sample-activities/service/util/cp/curriculum/images/shop.png);
}
.open-water .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/images/open_water_scene.png);
}
.pirate .page-decorations {
	background-color: #a0e3f8;
    background-image: url(/sample-activities/service/util/cp/curriculum/images/pirate_background.png);
}
.space .page-decorations {
	background-color: #010141;
    background-image: url(/sample-activities/service/util/cp/curriculum/images/space_background.png);
}
.window-ledge .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/images/window.png);
}

.space2 .page-decorations{
	background-color: #010141;
    background-image: url(/sample-activities/service/util/cp/curriculum/images/space-bg.png);
}
.space2 .page-decorations:after , .space3 .page-decorations:after{
	content:" ";
	position:absolute;
	width:100%;
	height: 100%;
	background-image: url(/sample-activities/service/util/cp/curriculum/images/space-stars.png);
	-webkit-animation: fade-in-out 4s ease infinite;
	-moz-animation: fade-in-out 4s ease infinite;
	animation: fade-in-out 4s ease infinite;
}
.space3 .page-decorations{
	background-color: #042a41;
    background-image: url(/sample-activities/service/util/cp/curriculum/images/space-3-bg.png);
}

.desktop .page-decorations{
	background-color: #e0fac1;
    background-image: url(/sample-activities/service/util/cp/curriculum/images/desktop_bg.png);
}
.desktop_blue .page-decorations{
	background-color: #e0fac1;
    background-image: url(/sample-activities/service/util/cp/curriculum/images/desktop_bg_blue.png);
}

.pictureframe .page-decorations{
    background-image: url(/sample-activities/service/util/cp/curriculum/images/pictureframe_background.png);
}

.paper .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/content/shared/hub/images/paper.jpg);
}


.bluepaper .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/content/shared/hub/images/paperblue.jpg);
}


.cork .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/content/shared/hub/images/corkboard_background.jpg);
}

.circuitboard .page-decorations {
    background-color: #70b042;
    background-image: url(/sample-activities/service/util/cp/curriculum/images/circuitboard_pattern-repeat.svg);
    background-repeat: repeat-x;
}

.arctic .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/images/winter_scene.png);
}
.tundra .page-decorations {
    background-image: url(/sample-activities/service/util/cp/curriculum/images/tundra.png);
}

.lab .page-decorations {
     background-image: url(/sample-activities/service/util/cp/curriculum/images/lab_background.png);
}

.interaction-control-bar {
    background: #0077d4;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNzdkNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZjVmYjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #0077d4 0%, #0f5fb5 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0077d4), color-stop(100%,#0f5fb5));
	background: -webkit-linear-gradient(top,  #0077d4 0%,#0f5fb5 100%);
	background: -o-linear-gradient(top,  #0077d4 0%,#0f5fb5 100%);
	background: -ms-linear-gradient(top,  #0077d4 0%,#0f5fb5 100%);
	background: linear-gradient(to bottom,  #0077d4 0%,#0f5fb5 100%);
    border: 2px solid #0F5FB5;
    border-radius: 29px 29px 29px 29px;
    box-shadow: 0 2px 2px rgba(1, 1, 1, 0.2);
    height: 57px;
    left: -30px;
    position: absolute;
    right: -30px;
    top: -20px;
}
.interaction-control-bar > ul {
    margin-top: 2px;
    position: relative;
}
.interaction-control-bar li {
    float: left;
    height: 42px;
    margin: 4px 0;
    padding: 0 12px;
    position: relative;
}
.interaction-control-bar li:first-child {
    border-right: 2px solid #0F5FB5;
}
.interaction-control-bar li:last-child {
    border-left: 2px solid #0F5FB5;
    float: right;
}
.interaction-control-bar li:first-child:after {
    background: none repeat scroll 0 0 #0077D4;
    bottom: 0;
    content: " ";
    position: absolute;
    right: -4px;
    top: 0;
    width: 2px;
}
.interaction-control-bar li:last-child:after {
    background: none repeat scroll 0 0 #0077D4;
    bottom: 0;
    content: " ";
    position: absolute;
    left: -4px;
    top: 0;
    width: 2px;
}
.interaction-control-bar li.timer {
    background: none repeat scroll 0 0 #0D63BB;
    border-radius: 100px 100px 100px 100px;
    box-shadow: 0 2px #0077D4, 0 0 3px rgba(24, 24, 25, 0.5) inset;
    height: 37px;
    left: 82px;
    line-height: 36px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-align: center;
    top: 3px;
    width: 117px;
}
.interaction-control-bar li.timer .timer-wrapper {
    border-radius: 100px 100px 100px 100px;
    bottom: 4px;
    left: 4px;
    overflow: hidden;
    position: absolute;
    right: 4px;
    top: 4px;
}
.interaction-control-bar li.timer .timer-wrapper .timer-decoration {
    border-radius: 100px 100px 100px 100px;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background: #e7f3ff;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0NSUiIHN0b3AtY29sb3I9IiNlN2YzZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #e7f3ff 45%, #ffffff 55%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(45%,#e7f3ff), color-stop(55%,#ffffff));
	background: -webkit-linear-gradient(top,  #e7f3ff 45%,#ffffff 55%);
	background: -o-linear-gradient(top,  #e7f3ff 45%,#ffffff 55%);
	background: -ms-linear-gradient(top,  #e7f3ff 45%,#ffffff 55%);
	background: linear-gradient(to bottom,  #e7f3ff 45%,#ffffff 55%);
}
.interaction-control-bar li.timer.ending .timer-wrapper .timer-decoration {
    background: none repeat scroll 0 0 #F90000;
    -webkit-animation: flash-red 1s ease infinite;
	-moz-animation: flash-red 1s ease infinite;
	animation: flash-red 1s ease infinite;
}
.interaction-control-bar li.timer.expired .timer-wrapper .timer-decoration {
    background: none repeat scroll 0 0 transparent;
    -webkit-animation: none;
	-moz-animation: none;
	animation: none;
}
.interaction-control-bar li.timer > .label {
    bottom: 0;
    font-size: 20px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.interaction-control-bar li.timer.ending > .label {
	color: #fff;
}
.interaction-control-bar li.timer.expired > .label {
	color: #054B98;
}
.interaction-control-bar li.timer .timer_suffix {
    font-size: 16px;
    margin-left: 1px;
}
.interaction-control-bar li.progress_bar {
    background: none repeat scroll 0 0 #0D63BB;
    border-radius: 100px 100px 100px 100px;
    box-shadow: 0 2px #0077D4, 0 0 3px rgba(24, 24, 25, 0.5) inset;
    height: 37px;
    line-height: 36px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 82px;
    text-align: center;
    top: 3px;
    width: 155px;
}
.interaction-control-bar li.progress_bar .progress-wrapper {
    border-radius: 100px 100px 100px 100px;
    bottom: 4px;
    left: 4px;
    overflow: hidden;
    position: absolute;
    right: 4px;
    top: 4px;
	transform: translate3d(0,0,0);
}
.interaction-control-bar li.progress_bar .progress-wrapper .progress-decoration {
    background: #e7f3ff;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0NSUiIHN0b3AtY29sb3I9IiNlN2YzZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #e7f3ff 45%, #ffffff 55%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(45%,#e7f3ff), color-stop(55%,#ffffff));
	background: -webkit-linear-gradient(top,  #e7f3ff 45%,#ffffff 55%);
	background: -o-linear-gradient(top,  #e7f3ff 45%,#ffffff 55%);
	background: -ms-linear-gradient(top,  #e7f3ff 45%,#ffffff 55%);
	background: linear-gradient(to bottom,  #e7f3ff 45%,#ffffff 55%);
    border-radius: 100px 100px 100px 100px;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.interaction-control-bar li.progress_bar .progress-wrapper .progress-decoration .progress {
    background: #63d745;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0NSUiIHN0b3AtY29sb3I9IiM2M2Q3NDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9IiM4OWViNTEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #63d745 45%, #89eb51 55%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(45%,#63d745), color-stop(55%,#89eb51));
	background: -webkit-linear-gradient(top,  #63d745 45%,#89eb51 55%);
	background: -o-linear-gradient(top,  #63d745 45%,#89eb51 55%);
	background: -ms-linear-gradient(top,  #63d745 45%,#89eb51 55%);
	background: linear-gradient(to bottom,  #63d745 45%,#89eb51 55%);
    border-radius: 100px 0 0 100px;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 0%;
}
.interaction-control-bar li.progress_bar > .label {
    bottom: 0;
    font-size: 15px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.page_container {
    bottom: 25px;
    left: 25px;
    padding: 20px;
    position: absolute;
    right: 25px;
    top: 37px;
}
.previous_interaction,
.next_interaction,
.finish_interactions {
	background: url(/sample-activities/service/util/cp/curriculum/images/button_containers_retina.png) no-repeat scroll left top transparent;
    background-size: 250px 165px;
    border-radius: 100% 100% 100% 100%;
    height: 165px;
	margin-top: -85px;
    position: absolute;
    top: 50%;
    width: 125px;
}
.next_interaction,
.previous_interaction,
.finish_interactions .previous_interaction {
    left: -68px;
}
.next_interaction,
.finish_interactions {
	left: auto;
    right: -58px;
}
.next_interaction {
    background-position: -115px top;
}
.finish_interactions  {
    background-position: -115px top;
}
.previous_interaction .btn {
    display: block;
    left: 25px;
    position: absolute;
    top: 44px;
}
.next_interaction .btn,
.finish_interactions .btn {
    display: block;
    position: absolute;
    right: 15px;
    top: 44px;
}
.results.page > span.done:not(.next_interaction) {
	left: 402px;
	position: absolute;
	top: 386px;
}
.score_interaction {
    border-radius: 100% 100% 100% 100%;
    box-shadow: 0 2px 2px rgba(1, 1, 1, 0.2);
    position: absolute;
    right: 10px;
    top: 10px;
}
.interaction_controls .refresh_interaction {
	border-radius: 100% 100% 100% 100%;
    box-shadow: 0 2px 2px rgba(1, 1, 1, 0.2);
    position: absolute;
    right: 28px;
    top: 96px;
}
.popup-wrapper {
	background: none repeat scroll 0 0 rgba(1, 1, 1, 0.65);
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	display: none;
	z-index: 98;
}
.popup-wrapper.active {
    display: block;
}
.popup {
    background: none repeat scroll 0 0 #108FE8;
    border: 3px solid #FFFFFF;
    border-radius: 18px;
    bottom: 0;
    box-shadow: 0 0 0 2px #0869AF inset, 0 5px 5px rgba(24, 24, 25, 0.2), 0 23px rgba(255, 255, 255, 0.15) inset, 0 -12px rgba(255, 255, 255, 0.05) inset;
    color: #FFFFFF;
    display: none;
    font-size: 19px;
    height: 300px;
    left: 0;
    margin: auto;
    padding: 35px 15px 15px;
    position: absolute;
    right: 0;
    top: 0;
    width: 450px;
    z-index: 10000;
}
.popup.active {
    display: block;
}
.popup.hint_container {
    background: none repeat scroll 0 0 #FD8805;
    box-shadow: 0 0 0 2px #D27002 inset, 0 5px 5px rgba(24, 24, 25, 0.2), 0 23px rgba(255, 255, 255, 0.15) inset, 0 -12px rgba(255, 255, 255, 0.05) inset;
}

.popup.parrot {
  background-position: center bottom 10px;
  background-repeat: no-repeat;
  background-size: auto 53%;
}

.popup.parrot.mini-p {
  background-size: auto 33%;
}

.popup.hint_container.parrot {
  background-image: url("/sample-activities/service/util/cp/curriculum/content/shared/images/parrot_hint.png");
}

.popup.info_container.parrot {
  background-image: url("/sample-activities/service/util/cp/curriculum/content/shared/images/parrot_instructions.png");
}

.popup.options_container {
	background: none repeat scroll 0 0 rgba(15, 142, 232, 0.88);
}
.popup.medium {
	width: 485px;
	height: 450px;
}
.popup.large {
    height: 450px;
    width: 828px;
}
.popup.extra-large {
	width: 904px;
	height: 505px;
	margin-top: 52px;
	margin-left: -17px;
	padding: 40px 20px 20px;
}
.popup.extra-large > .title,
.popup.extra-large > .instruction_column1 > .title {
	text-align: left;
	font-size: 28px;
	margin-bottom: 10px;
}
.popup.extra-large .instruction_column1 {
	margin: 0 0 0 25px;
}
.popup .center {
    margin: 0 auto;
    text-align: center;
}
.popup .left,
.popup .right {
    float: left;
    width: 45%;
}
.popup .left img {
    float: left;
}
.popup .right img {
    float: right;
}
.popup img {
    max-width: 100%;
}
.popup > .title,
.slider .title {
    display: block;
    font-size: 36px;
    margin-bottom: 15px;
    margin-top: -15px;
    text-align: center;
}


.popup .sub-title {
    font-size: 22px;
}
.popup .close {
    position: absolute;
    right: -15px;
    top: -15px;
}
.interaction[data-seconds] .info_container {
  text-align: center;
  background-image: url("/sample-activities/service/util/cp/curriculum/content/shared/images/parrot_timer.png");
  background-position: center 110px;
  background-repeat: no-repeat;
}
.messages {
	font-weight: normal;
}
.no-fullscreen .fullscreen_switch {
	display: none;
}
.fullscreen .fullscreen_switch {
    background: url(/sample-activities/service/util/cp/curriculum/images/expand_min_icons_retina.png) no-repeat scroll 0 0 transparent;
    background-size: 80px 40px;
    cursor: pointer;
    height: 40px;
    position: fixed;
    right: 6px;
    text-indent: -3000em;
    bottom: 3px;
    width: 39px;
    z-index: 9999;
}
.no-touch .fullscreen_switch:hover {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    transform: scale(1.3);
}
.fullscreen_switch.on {
    background-position: 0 0;
}
.fullscreen_switch.off {
	display: none;
	background-position: -40px 0;
}




body:-webkit-full-screen { width:100%; }
body:-moz-full-screen { width:100%; }
body:-ms-full-screen { width:100%; }
body:-o-full-screen { width:100%; }
body:fullscreen { width:100%; }

body:-webkit-full-screen #navigation_btns, body:-webkit-full-screen .fullscreen_switch.on { display:none; }
body:-moz-full-screen #navigation_btns, body:-moz-full-screen .fullscreen_switch.on { display:none; }
body:-ms-full-screen #navigation_btns, body:-ms-full-screen .fullscreen_switch.on { display:none; }
body:-o-full-screen #navigation_btns, body:-o-full-screen .fullscreen_switch.on { display:none; }
body:fullscreen #navigation_btns, body:fullscreen .fullscreen_switch.on { display:none; }

body:-webkit-full-screen .fullscreen_switch.off { display: inline-block; }
body:-moz-full-screen .fullscreen_switch.off { display:inline-block; }
body:-ms-full-screen .fullscreen_switch.off { display:inline-block; }
body:-o-full-screen .fullscreen_switch.off { display:inline-block; }
body:fullscreen .fullscreen_switch.off { display:inline-block; }

body.activity #footer {
    display: none;
}

.activity .canvas-wrapper {
    bottom: -1px;
    left: -1px;
    overflow: hidden;
    position: absolute;
    right: -1px;
    top: 0;
}

.activity .keyboard_container {
    background: none repeat scroll 0 0 #0290F4;
    border: 3px solid #FFFFFF;
    border-radius: 50px 50px 50px 50px;
    bottom: 8px;
    box-shadow: 0 -2px 0 3px #0869AF inset, 0 -3px 1px 3px #2FA9FF inset, 0 30px rgba(255, 255, 255, 0.176) inset, 0 2px 2px rgba(1, 1, 1, 0.1);
    display: inline-block;
    left: 21px;
    overflow: hidden;
    position: absolute;
    vertical-align: top;
}
.activity .keyboard-decimal .keyboard_container {
    left: 9px;
}
.activity .keyboard_container > a {
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 27px;
    font-family: 'Open Sans Semibold';
    height: 65px;
    line-height: 41px;
    margin-bottom: 5px;
    padding: 10px 10px 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px #0081DC;
    transform: translateY(0px);
    width: 74px;
}
.activity .keyboard-decimal .keyboard_container > a {
    width: 70px;
}
.activity .keyboard_container > a:before, .activity .keyboard_container > a:after {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3);
    bottom: 10px;
    content: " ";
    position: absolute;
    right: -1px;
    top: 10px;
    width: 1px;
}
.activity .keyboard_container > a:before {
    background: none repeat scroll 0 0 rgba(1, 1, 1, 0.15);
    right: 0;
}
.activity .keyboard_container > a:last-child:before, .activity .keyboard_container > a:last-child:after {
    display: none;
}

.activity .keyboard_container > a:hover {
    background: none repeat scroll 0 0 rgba(1, 1, 1, 0.2);
}

.touch .activity .keyboard_container > a:hover {
    background: none;
    -webkit-animation: hover-touch-blue 0.3s 1 both linear;
    -moz-animation: hover-touch-blue 0.3s 1 both linear;
    animation: hover-touch-blue 0.3s 1 both linear;
}

.activity .keyboard_container > a:first-child {
    padding-right: 5px;
    width: 78px;
}
.activity .keyboard-decimal .keyboard_container > a:first-child {
    padding-right: 5px;
    width: 74px;
}
.activity .keyboard_container > a:last-child {
    padding-left: 5px;
    width: 78px;
}
.activity .keyboard-decimal .keyboard_container > a:last-child {
    width: 74px;
}

.activity .keyboard_container > a:active {
    padding-top: 12px;
}

.fraction{
    display:inline-block;
    position:relative;
    vertical-align:middle;
    white-space:normal;
    line-height: 1.4em;
    overflow: hidden;
    padding: 0 0.175em;
    margin: 0 0.1em;
}

.fraction:after{
    content: "______________";
    position: absolute;
    left: 0;
    right: 0;
    top: 0.17em;
}

.fraction>.number{
    font-size:.8em;
    position:relative;
    text-align:center;
    width:100%
}

.fraction>.number.top{
    display:inline-block;
}

.fraction>.number.bottom{
    display: block;
    top: -0.4em;
}

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: translateY(-3500px);
    }
    70% {
        -webkit-transform: translateY(30px);
    }
    85% {
        -webkit-transform: translateY(-10px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}
@-moz-keyframes bounce {
    0% {
        -moz-transform: translateY(-3500px);
    }
    70% {
        -moz-transform: translateY(30px);
    }
    85% {
        -moz-transform: translateY(-10px);
    }
    100% {
        -moz-transform: translateY(0);
    }
}
@keyframes bounce {
    0% {
        transform: translateY(-3500px);
    }
    70% {
        transform: translateY(30px);
    }
    85% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

@-webkit-keyframes parrott-up {
    0% {
        -webkit-transform: translateY(400px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}
@-moz-keyframes parrott-up {
    0% {
        -moz-transform: translateY(400px);
    }
    100% {
        -moz-transform: translateY(0);
    }
}
@keyframes parrott-up {
    0% {
        transform: translateY(400px);
    }
    100% {
        transform: translateY(0);
    }
}
@-webkit-keyframes wing-rotate {
    0% {
        -webkit-transform: rotate(120deg);
    }
    10% {
        -webkit-transform: rotate(120deg);
    }
    20% {
        -webkit-transform: rotate(-22deg);
    }
    40% {
        -webkit-transform: rotate(0);
    }
    60% {
        -webkit-transform: rotate(-22deg);
    }
    80% {
        -webkit-transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(-22deg);
    }
}
@-moz-keyframes wing-rotate {
    0% {
        -moz-transform: rotate(120deg);
    }
    10% {
        -moz-transform: rotate(120deg);
    }
    20% {
        -moz-transform: rotate(-22deg);
    }
    40% {
        -moz-transform: rotate(0);
    }
    60% {
        -moz-transform: rotate(-22deg);
    }
    80% {
        -moz-transform: rotate(0);
    }
    100% {
        -moz-transform: rotate(-22deg);
    }
}
@keyframes wing-rotate {
    0% {
        transform: rotate(120deg);
    }
    10% {
        transform: rotate(120deg);
    }
    20% {
        transform: rotate(-22deg);
    }
    40% {
        transform: rotate(0);
    }
    60% {
        transform: rotate(-22deg);
    }
    80% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(-22deg);
    }
}
@-webkit-keyframes beak-swap {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -42px 0;
    }
}
@-moz-keyframes beak-swap {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -42px 0;
    }
}
@keyframes beak-swap {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -42px 0;
    }
}
@-webkit-keyframes blink {
    0% {
        height: 0px;
    }
    5% {
        height: 39px;
    }
    10% {
        height: 0px;
    }
    100% {
        height: 0px;
    }
}
@-moz-keyframes blink {
    0% {
        height: 0px;
    }
    5% {
        height: 39px;
    }
    10% {
        height: 0px;
    }
    100% {
        height: 0px;
    }
}
@keyframes blink {
    0% {
        height: 0px;
    }
    5% {
        height: 39px;
    }
    10% {
        height: 0px;
    }
    100% {
        height: 0px;
    }
}
.animation-wrapper {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
}
.page.splash:not(.active) * {
	visibility: hidden;
}
.title-banner {
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: -85px;
}
.active .title-banner {
    -webkit-animation: bounce ease-out 2s 1 .25s;
    -moz-animation: bounce ease-out 2s 1 .25s;
    animation: bounce ease-out 2s 1 .25s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-transform: translate3d(0,-3500px,0);
    -moz-transform: translate3d(0,-3500px,0);
    transform: translate3d(0,-3500px,0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: 1;
}

.results.page.active .title-banner {
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
}

.parrott-wrapper {
    bottom: -42px;
    display: block;
    height: 230px;
    left: 100px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0,400px,0);
    -moz-transform: translate3d(0,400px,0);
    transform: translate3d(0,400px,0);
    width: 185px;
    -webkit-animation: parrott-up ease-out 1s 1 1.8s;
    -moz-animation: parrott-up ease-out 1s 1 1.8s;
    animation: parrott-up ease-out 1s 1 1.8s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.parrott-wrapper .parrott {
    background: url(/sample-activities/service/util/cp/curriculum/images/body.png) no-repeat scroll 0 0 transparent;
    top: 0;
    display: block;
    height: 230px;
    left: 0;
    position: absolute;
    width: 185px;
}
.parrott-wrapper .beak {
    background: url(/sample-activities/service/util/cp/curriculum/images/beaks.png) no-repeat scroll 0 0 transparent;
    display: block;
    height: 60px;
    left: 118px;
    position: absolute;
    top: 28px;
    width: 42px;
    /* -webkit-animation: beak-swap steps(1) 1s 1 2.3s;
    -moz-animation: beak-swap steps(1) 1s 1 2.3s;
    animation: beak-swap steps(1) 1s 1 2.3s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards; */
}
.parrott-wrapper .wing {
    background: url(/sample-activities/service/util/cp/curriculum/images/wing.png) no-repeat scroll 0 0 transparent;
    display: block;
    height: 104px;
    left: 151px;
    position: absolute;
    top: 51px;
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    transform: rotate(120deg);
    -webkit-transform-origin: 18px 57px 0;
    -moz-transform-origin: 18px 57px 0;
    transform-origin: 18px 57px 0;
    width: 99px;
    -webkit-animation: wing-rotate linear 1s 1 2.6s;
    -moz-animation: wing-rotate linear 1s 1 2.6s;
    animation: wing-rotate linear 1s 1 2.6s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.parrott-wrapper .eye-lids {
    background: url(/sample-activities/service/util/cp/curriculum/images/shut_eyes.png) no-repeat scroll 0 0 transparent;
    height: 0;
    left: 88px;
    position: absolute;
    top: 27px;
    width: 79px;
    -webkit-animation: blink steps(1) 6s infinite 2.85s;
    -moz-animation: blink steps(1) 6s infinite 2.85s;
    animation: blink steps(1) 6s infinite 2.85s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.title-wrapper {
    color: #FFFFFF;
    font-family: 'Open Sans Semibold';
    font-size: 25px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    text-shadow: 0 -1px #00457D;
    top: -47px;
}
.title-wrapper > span {
    font-family: 'Open Sans';
    font-size: 0.9em;
    text-shadow: none;
}
.activity .activity_controls {
    bottom: 18px;
    position: absolute;
    right: 11px;
    width: 126px;
}
.activity  .activity_controls > input.btn {
    border-radius: 40px 40px 40px 40px !important;
    margin: 0 0 6px;
    width: 126px !important;
}

/* Pathway UI */

body.activity {
    overflow: hidden;
}
#menu-btn {
    background: url(/sample-activities/service/util/cp/curriculum/images/pathways_menu_icon.png) no-repeat scroll 72px 11px / 15px 12px #0D62B9;
    border: 2px solid #FFFFFF;
    border-top: 0 none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 2px 2px rgba(1, 1, 1, 0.2);
    color: #FFFFFF;
    font-family: 'Open Sans',sans-serif;
    font-size: 18px;
    left: 104px;
    outline: 0 none;
    padding: 4px 39px 4px 12px;
    position: fixed;
    text-align: center;
    text-decoration: none;
    z-index: 10000;
    -webkit-transition: top 0.3s ease 0s;
	-moz-transition: top 0.3s ease 0s;
	transition: top 0.3s ease 0s;
	top: 0;
}
/* Fix for Android device */
@media all and (max-width: 1360px) and (min-width: 1260px) and (max-height: 700px) {
	#menu-btn {
		left: 22px;
	}
}
#menu-btn:hover {
    background-color: #2379D3;
}
.nav-open #menu-btn {
	top: 100%;
}
.pathway-nav #close_menu {
	border: 0 none !important;
}
.pathway-nav .btn.close {
    background-color: rgba(0, 0, 0, 0) !important;
    border: 0 none;
    box-shadow: none !important;
    height: 35px;
    outline: 0 none !important;
    position: absolute;
    right: 6px;
    top: 8px;
    width: 35px;
}
.pathway-nav,
.pathway-nav * {
    color: #054B97;
    font-family: 'Open Sans',sans-serif;
    font-size: 14px;
    line-height: 1.6;
    text-decoration: none;
}
.pathway-nav {
    background: none repeat scroll 0 0 #FFFFFF;
    border-right: 2px solid #FFFFFF;
    box-shadow: 2px 0 2px rgba(1, 1, 1, 0.2);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    width: 340px;
    z-index: 9999;
}
.pathway-nav {
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}
.nav-open .pathway-nav {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
}
.pathway-nav .header {
	background: rgb(0,119,212);
	background: -moz-linear-gradient(top,  rgba(0,119,212,1) 0%, rgba(15,95,181,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,119,212,1)), color-stop(100%,rgba(15,95,181,1)));
	background: -webkit-linear-gradient(top,  rgba(0,119,212,1) 0%,rgba(15,95,181,1) 100%);
	background: -o-linear-gradient(top,  rgba(0,119,212,1) 0%,rgba(15,95,181,1) 100%);
	background: -ms-linear-gradient(top,  rgba(0,119,212,1) 0%,rgba(15,95,181,1) 100%);
	background: linear-gradient(to bottom,  rgba(0,119,212,1) 0%,rgba(15,95,181,1) 100%);
    border-bottom: 0 none;
    border-top: 0 none;
    padding: 10px;
}
.pathway-nav .header span {
    background: url(/sample-activities/service/util/cp/curriculum/images/pathway_back_retina.png) no-repeat scroll 6px 7px / 9px auto rgba(0, 0, 0, 0);
    color: #FFFFFF;
    display: inline-block;
    vertical-align: top;
    font-family: 'Open Sans Semibold',sans-serif;
    font-size: 18px;
    padding-right: 30px;
    text-indent: 32px;
    text-shadow: 0 -1px #00457D;
}
html.no-touch .pathway-nav .header span:hover {
    text-decoration: underline;
}
.pathway-nav > ul {
    bottom: 0;
    left: 0;
    max-height: 100%;
    overflow-x: auto;
    position: absolute;
    right: 0;
    top: 49px;
    -webkit-overflow-scrolling: touch;
    background-color: #EDF6FF;
}
.pathway-nav > ul > li > * {
    display: block;
    padding: 10px 10px 9px;
}
.pathway-nav > ul > li {
    background: none repeat scroll 0 0 #EDF6FF;
    border-bottom: 1px solid #D3EAFF;
    border-top: 1px solid #FFFFFF;
    position: relative;
}
.pathway-nav > ul > li.current:after {
	border: 11px solid transparent;
	border-right: 11px solid #fff;
    content: " ";
    margin-top: -11px;
    position: absolute;
    right: 0;
    top: 50%;
}
.pathway-nav > ul > li:last-child {
    border-bottom: 1px solid #E0F0FF;
    box-shadow: 0 1px #FFF;
}
.pathway-nav > ul > li.current {
    background: none repeat scroll 0 0 #ADD8FF;
    border-bottom: 1px solid #A0D1FF;
}
html.no-touch .pathway-nav > ul > li:not(.current):hover {
    background: none repeat scroll 0 0 #D3EAFF;
}
.pathway-nav > ul > li .teacher-tool,
.pathway-nav > ul > li .activity {
    bottom: -1px;
    left: 0;
    position: absolute;
    top: 0;
    width: 42px;
}
.pathway-nav > ul > li:not(.current):hover .teacher-tool,
.pathway-nav > ul > li:not(.current):hover .activity {
    background: none repeat scroll 0 0 #D3EAFF;
}
.pathway-nav > ul > li.current .teacher-tool,
.pathway-nav > ul > li.current .activity {
    background: none repeat scroll 0 0 #ADD8FF;
    border-color: #8FC7FB;
}
.pathway-nav > ul > li .title {
    display: block;
    padding-left: 34px;
    font-weight: 400;
}
.pathway-nav > ul > li .teacher-tool > i {
	background-image: url(/sample-activities/service/util/cp/curriculum/images/teacher_tool_icon_retina.png);
    background-position: 7px 7px;
    background-repeat: no-repeat;
    background-size: 20px auto;
    content: " ";
    height: 21px;
    left: 4px;
    margin-top: -13px;
    position: absolute;
    top: 50%;
    width: 38px;
}
.pathway-nav > ul > li .activity > i {
    border-radius: 100px;
    box-shadow: 0 0 0 1px #FFFFFF;
    content: " ";
    height: 12px;
    left: 15px;
    margin-top: -7px;
    position: absolute;
    top: 50%;
    width: 12px;
}
.pathway-nav > ul > li .activity > i.LOWER,
.pathway-nav > ul > li .activity > i.AVERAGE,
.pathway-nav > ul > li .activity > i.UPPER {
	border-radius: 0;
    box-shadow: none;
    width: 15px;
	height: 15px;
    background-image: url(/sample-activities/service/util/cp/curriculum/images/pathway_levels_shapes.png);
    background-size: 45px auto;
	background-repeat: no-repeat;
}
.pathway-nav > ul > li .activity > i.AVERAGE {
    background-position: -15px -1px;
}
.pathway-nav > ul > li .activity > i.UPPER {
    background-position: -30px 0;
}
.pathway-nav > ul > li .activity > i.no-ability {
	background-image: url(/sample-activities/service/util/cp/curriculum/images/activity_icon_retina.png);
	background-size: 90px;
	background-repeat: no-repeat;
	border-radius: 0;
	left: 16px;
}

/* Reset Message Styles */

.activity .page.results .messages,
.activity .page.results .messages > *,
.activity .page.results .messages:before,
.activity .page.results .messages:after {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    color: #000000;
    padding: 0;
    position: static;
    margin: 0;
    text-shadow: none;
    width: auto;
}
.activity .page.results .results-wrapper {
    bottom: 0;
    height: 516px;
    left: 0;
    margin: 0 auto;
    padding: 90px 60px 50px 65px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 655px;
}

.activity .page.results .results-wrapper:after,
.activity .assessment .page.results .results-wrapper.no-score:after {
    background: url(/sample-activities/service/util/cp/curriculum/images/feedback_bg.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    bottom: 0;
    content: " ";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.activity .assessment .page.results .results-wrapper.no-score.no-time:after {
    background: url(/sample-activities/service/util/cp/curriculum/images/feedback_bg_noscore_notime.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    bottom: 0;
    content: " ";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.activity .page.results .results-wrapper.no-score:after {
    background: url(/sample-activities/service/util/cp/curriculum/images/feedback_bg_no_score.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.activity .page.results .results-wrapper.no-score.no-time:after {
    background: url(/sample-activities/service/util/cp/curriculum/images/feedback_bg_noscore_notime.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.activity .page.results.self-assessed .results-wrapper:after {
    background: url(/sample-activities/service/util/cp/curriculum/images/self_assessment_frame.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    width: 687px;
    left: -45px;
    height: 529px;
}
.activity .page.results.self-assessed .results-wrapper.no-score:after {
    background: url(/sample-activities/service/util/cp/curriculum/images/self_assessment_time_frame.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    width: 687px;
    left: -43px;
    height: 529px;
}
.activity .page.results.self-assessed .results-wrapper.no-score.no-time:after {
    background: url(/sample-activities/service/util/cp/curriculum/images/self_assessment_notime_noscore_frame.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    width: 687px;
    left: -43px;
    height: 529px;
}

.activity .page.results .results-wrapper .messages,
.activity .page.results.self-assessed .results-wrapper.no-score .messages {
    margin-top: 135px;
    text-align: center;
}
.activity .page.results .results-wrapper.no-score .messages {
	margin-top: 175px;
}
.activity .page.results .results-wrapper.no-score.no-time .messages {
	margin-top: 175px;
}
.activity .page.results.self-assessed .results-wrapper .messages {
    margin-top: 90px;
}
.activity .page.results.self-assessed .results-wrapper.no-score.no-time .messages {
	margin-top: 28px;
	margin-left: 188px;
}
.activity .page.results .results-wrapper .stars-container {
    background: none repeat scroll 0 0 #1682CF;
    font-size: 0;
    height: 44px;
    left: 123px;
    position: absolute;
    right: 109px;
    top: 160px;
}
.activity .page.results.self-assessed .results-wrapper .stars-container {
    left: 112px;
    top: 119px;
}
.activity .page.results .results-wrapper .stars-container .percentage {
    color: #FFFFFF;
    font-family: 'Open Sans Semibold';
    font-size: 31px;
    left: 2px;
    position: absolute;
    right: 0;
    text-align: center;
    text-shadow: -1px 0 #0D62B9, 0 1px #0D62B9, 1px 0 #0D62B9, 0 -1px #0D62B9;
    top: -46px;
    z-index: 100;
}
.activity .page.results .results-wrapper .stars-container .stars {
    background: none repeat scroll 0 0 #00D30C;
    bottom: 0;
    box-shadow: 0 20px rgba(255, 255, 255, 0.25) inset;
    height: 39px;
    left: 0;
    position: absolute;
    top: 0;
    width: 0.01%;
}
.activity .page.results .results-wrapper .messages .score {
    color: #FFFFFF;
    font-family: 'Open Sans Semibold';
    font-size: 44px;
    letter-spacing: -2px;
    margin-bottom: 25px;
    text-shadow: -1px 0 #0D62B9, 0 1px #0D62B9, 1px 0 #0D62B9, 0 -1px #0D62B9;
    white-space: nowrap;
}
.activity .page.results .results-wrapper .messages .counter {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 2px solid #0080DA;
    border-radius: 50px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) inset, 0 0 0 2px #BBE3FF;
    color: #0C64BC;
    display: inline-block;
    font-family: 'Open Sans Semibold';
    font-size: 22px;
    margin-bottom: 30px;
    padding: 3px 30px;
    vertical-align: top;
    white-space: nowrap;
}
.activity .page.results .results-wrapper.no-score .messages .counter.label {
    display: block;
    margin-bottom: 13px;
}
.activity .page.results .results-wrapper.no-score.no-time .messages .counter.label {
    display: block;
    margin-bottom: 13px;
}
.activity .page.results .results-wrapper .messages .counter.label {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    box-shadow: none;
    color: #FFFFFF;
    font-size: 23px;
    padding: 3px 10px;
    text-shadow: -1px 0 #0D62B9, 0 1px #0D62B9, 1px 0 #0D62B9, 0 -1px #0D62B9;
}
.activity .page.results .results-wrapper .messages > span > span:not(.stars-container) {
    display: block;
    position: relative;
    z-index: 2;
}
.activity .page.results .results-wrapper .btn {
    border-color: #FFFFFF;
    margin-left: 20px;
    position: relative;
    z-index: 5;
}
.activity .page.results .results-wrapper .btn.save {
    margin-left: 9px;
    margin-top: 12px;
}
.activity .page.results.self-assessed .results-wrapper .btn.comment-toggle {
    bottom: 41px;
    position: absolute;
    right: 115px;
    top: auto;
    z-index: 5;
}
.activity .page.results.self-assessed .self-assessment form > label {
    bottom: 129px;
    font-family: "Open Sans SemiBold";
    font-size: 21px;
    left: 15px;
    position: absolute;
    width: 144px;
    z-index: 5;
}
form [class*="smiley-"] {
    bottom: 41px;
    position: absolute;
    z-index: 5;
}
form [class*="smiley-"] > input {
	display: none;
}
form [class*="smiley-"] > label {
	background-image: url(/sample-activities/service/util/cp/curriculum/images/face_icons.png);
    background-repeat: no-repeat;
    background-size: 180px auto;
    display: block;
    font-size: 0;
    height: 60px;
    width: 60px;
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    transition: all 250ms ease;
    cursor: pointer;
}
html.no-touch form [class*="smiley-"] > label:hover {
    -webkit-transform: scale(1.075);
    -moz-transform: scale(1.075);
    transform: scale(1.075);
}
form [class*="smiley-"] input:checked + label,
form [class*="smiley-"] input:checked + label:hover {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    transform: scale(1.4);
}
form [class*="smiley-"] > input:checked + label:after {
    border: 2px solid #FFFFFF;
    border-radius: 100px;
    bottom: 3px;
    box-shadow: 0 0 2px 1px #03529C;
    content: " ";
    left: 3px;
    position: absolute;
    right: 3px;
    top: 3px;
}
.smiley-sad > label {
	background-position: 0 0;
}
.smiley-ok > label {
	background-position: -60px 0;
}
.smiley-happy > label {
	background-position: -120px 0;
}
.smiley-sad {
    left: 188px;
}
.smiley-ok {
    left: 278px;
}
.smiley-happy {
    left: 365px;
}
.comment-area {
    background: #0077d4;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNzdkNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZjVmYjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #0077d4 0%, #0f5fb5 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0077d4), color-stop(100%,#0f5fb5));
	background: -webkit-linear-gradient(top,  #0077d4 0%,#0f5fb5 100%);
	background: -o-linear-gradient(top,  #0077d4 0%,#0f5fb5 100%);
	background: -ms-linear-gradient(top,  #0077d4 0%,#0f5fb5 100%);
	background: linear-gradient(to bottom,  #0077d4 0%,#0f5fb5 100%);
    border: 2px solid #0F5FB5;
    border-radius: 10px;
    bottom: 26px;
    left: 178px;
    padding: 10px;
    position: absolute;
    text-align: left;
    width: 300px;
    z-index: 5;
}
.comment-area > textarea {
	width: 100%;
}
.comment-area:after {
    content: " ";
    position: absolute;
	right: -25px;
    top: 31px;
    border: 12px solid transparent;
    border-left: 12px solid #0F5FB5;
}
.interaction_sequence.finished .interaction-control-bar .save-share {
    position: absolute;
    right: 405px;
    top: 283px;
    z-index: 1111;
}