﻿.loader-theme .interactive-element {
	background: #C1E1FF !important;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#C1E1FF), to(#93CCFF)) !important;
	background: -webkit-linear-gradient(#C1E1FF, #93CCFF) !important;
	background: -moz-linear-gradient(#C1E1FF, #93CCFF) !important;
	background: -ms-linear-gradient(#C1E1FF, #93CCFF) !important;
	background: -o-linear-gradient(#C1E1FF, #93CCFF) !important;
	background: linear-gradient(#C1E1FF, #93CCFF) !important;
	-pie-background: linear-gradient(#C1E1FF, #93CCFF) !important;

	-moz-box-shadow:inset 0px 1px 0px 0px #F4FAFF;
	-webkit-box-shadow:inset 0px 1px 0px 0px #F4FAFF;
	box-shadow:inset 0px 1px 0px 0px #F4FAFF;
	
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	
	text-indent:0;
	color:#333 !important;
	font-weight:normal;
	font-style:normal;
	text-decoration:none;
	border-width:1px;
	border-style:solid;
	border-color:#95C5F4;
	text-shadow:1px 1px 0px #dddddd;
	xoverflow:hidden; /* no quitarlo (necesario para IE10 o en algunos ejercicios hacía cosas raras parpadeando al hacer hover a cualquier elemento) */
}

.loader-theme .interactive-element.active {
	cursor:pointer;
}

.loader-theme .interactive-element.inactive {
	background: #ededed !important;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ededed), to(#dfdfdf)) !important;
	background: -webkit-linear-gradient(#ededed, #dfdfdf) !important;
	background: -moz-linear-gradient(#ededed, #dfdfdf) !important;
	background: -ms-linear-gradient(#ededed, #dfdfdf) !important;
	background: -o-linear-gradient(#ededed, #dfdfdf) !important;
	background: linear-gradient(#ededed, #dfdfdf) !important;
	-pie-background: linear-gradient(#ededed, #dfdfdf) !important;

	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;

	color:#444 !important;
	border-color:#D7D7D7;
	text-shadow:1px 1px 0px #ffffff;
}

.loader-theme .interactive-element.active:active {
	position:relative;
	top:1px;
}

.loader-theme .interactive-element.active:hover {
	background: #93CCFF !important;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#93CCFF), to(#C1E1FF)) !important;
	background: -webkit-linear-gradient(#93CCFF, #C1E1FF) !important;
	background: -moz-linear-gradient(#93CCFF, #C1E1FF) !important;
	background: -ms-linear-gradient(#93CCFF, #C1E1FF) !important;
	background: -o-linear-gradient(#93CCFF, #C1E1FF) !important;
	background: linear-gradient(#93CCFF, #C1E1FF) !important;
	-pie-background: linear-gradient(#93CCFF, #C1E1FF) !important;
}

.loader-theme .interactive-element.selected {
	background: #FFE28C !important;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFE28C), to(#FFD75B)) !important;
	background: -webkit-linear-gradient(#FFE28C, #FFD75B) !important;
	background: -moz-linear-gradient(#FFE28C, #FFD75B) !important;
	background: -ms-linear-gradient(#FFE28C, #FFD75B) !important;
	background: -o-linear-gradient(#FFE28C, #FFD75B) !important;
	background: linear-gradient(#FFE28C, #FFD75B) !important;
	-pie-background: linear-gradient(#FFE28C, #FFD75B) !important;

	-moz-box-shadow:inset 0px 1px 0px 0px #FFF2CC;
	-webkit-box-shadow:inset 0px 1px 0px 0px #FFF2CC;
	box-shadow:inset 0px 1px 0px 0px #FFF2CC;

	text-shadow:1px 1px 0px #FFF2CC;
	border-color:#edcb66;
	
}

.loader-theme .interactive-element.selected:hover {
	background: #FFD75B !important;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFD75B), to(#FFE28C)) !important;
	background: -webkit-linear-gradient(#FFD75B, #FFE28C) !important;
	background: -moz-linear-gradient(#FFD75B, #FFE28C) !important;
	background: -ms-linear-gradient(#FFD75B, #FFE28C) !important;
	background: -o-linear-gradient(#FFD75B, #FFE28C) !important;
	background: linear-gradient(#FFD75B, #FFE28C) !important;
	-pie-background: linear-gradient(#FFD75B, #FFE28C) !important;
}

.loader-theme .feedback-slider {
	margin-top:5px;
	height:45px;
	width:100%;
	text-align:center;
	line-height:1.3em;

	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	
	text-shadow:1px 1px 0px #FFF;
}

.loader-theme .feedback-slider .feedback-text {
	color: #990000;
	position:relative;
	font-size: 14px;
	font-weight: bold;
	margin-left: 20px;
	margin-right: 20px;
	padding-top: 6px;
	padding-bottom: 5px;
}

.loader-theme .feedback-slider .feedback-text .correct {
	color:#0000F0;
}

.loader-theme .feedback-slider .feedback-text .incorrect {
	color:#F00000;
}

.loader-theme .feedback-slider .feedback-text .feedback {
	font-size:12px;
	color: #7f8c8d;
	font-weight: normal;
}

.loader-theme .mark {
	background-repeat: no-repeat;
	background-position: left center;
	width: 20px;
	height: 100%;
	top:0;
	position:absolute;
}

.loader-theme .mark.correct {
	background-image: url(../../images/common_exercise_assets/tic-app.png);
}

.loader-theme .mark.incorrect {
	background-image: url(../../images/common_exercise_assets/cross-app.png);
}

.loader-theme .exerciseNavigation {
	padding-top: 30px;
	text-align: center;
	clear:both;
}

.loader-theme .button {
	background: #ededed;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ededed), to(#dfdfdf));
	background: -webkit-linear-gradient(#ededed, #dfdfdf);
	background: -moz-linear-gradient(#ededed, #dfdfdf);
	background: -ms-linear-gradient(#ededed, #dfdfdf);
	background: -o-linear-gradient(#ededed, #dfdfdf);
	background: linear-gradient(#ededed, #dfdfdf);
	-pie-background: linear-gradient(#ededed, #dfdfdf);

	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	
	font-family: inherit;
	text-indent:0;
	color:#444;
	font-weight:normal;
	font-style:normal;
	text-decoration:none;
	
	border-style:solid;
	border-width:1px;
	border-color:#D7D7D7 #D7D7D7 #D7D7D7 #EEEEEE;
	*border-color:#D7D7D7;
	text-shadow:1px 1px 0px #ffffff;
	
	cursor:pointer;
	
	height: 25px;
	font-size: 13px;
	width: 140px;
}

.loader-theme .button.big {
    width: 170px;
}

.loader-theme .button.mini {
	height: 22px;
	width: 95px;
	
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	
	border-left-color: #D7D7D7;
}

.loader-theme .button[disabled] {
	color:#999;
	cursor:default;
}

.loader-theme .button:first-child {
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	
	border-color:#D7D7D7;
}

.loader-theme .button:last-of-type {
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
}

.loader-theme .button:only-child {
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	border-color:#D7D7D7;
}

.loader-theme .button:enabled:hover {
	background: #dfdfdf;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#ededed));
	background: -webkit-linear-gradient(#dfdfdf, #ededed);
	background: -moz-linear-gradient(#dfdfdf, #ededed);
	background: -ms-linear-gradient(#dfdfdf, #ededed);
	background: -o-linear-gradient(#dfdfdf, #ededed);
	background: linear-gradient(#dfdfdf, #ededed);
	-pie-background: linear-gradient(#dfdfdf, #ededed);
}

/* WordOrder/WordInsert */

div.mainWordOrderDiv div.framesCollection div.frame div.sentence span.word.clone.visible div.arrow {
	border-left: 5px solid transparent !important;
	border-right: 5px solid transparent !important;
	border-top: 5px solid #edcb66 !important;
	margin-left:-5px !important;
	margin-top:2px !important;
}

/*Flashcard*/
.loader-theme .interactive-arrow, .loader-theme .interactive-arrow::before{
	border-color: #93CCFF;
}

.loader-theme .indicator-filled{
	width: 0px;
	background-color: #93CCFF !important;
	border-right: none !important;
	margin-right: 1px;
	-webkit-transition: width 0.5s ease;
	transition: width 0.5s ease;
}

.loader-theme .indicator-filled:last-child{
	margin-right: 0px;
}

.loader-theme .interactive-switch span{
	background-color: #93CCFF;
}

.loader-theme .interactive-switch input[type="radio"]:checked + label{
	color: #444;
}

.loader-theme .interactive-button-startagain{
	border: solid 1px #93CCFF;
	color: #93CCFF;
}

.loader-theme .interactive-button-startagain:hover{
	background-color: #93CCFF;
	color: #444;
}

.loader-theme .interactive-hover:hover{
	background-color: rgba(147,204,255,0.5);
}