/*
 * SFONDO
 */

BODY {
	height:100%;
	font-family: sans-serif;
	background-image: url('common/bg.png');
}




.background-layer1 {
	position: fixed;
	background-size: 100% 100%;
	top:30px;
	bottom: 0px;
	width: 100%;
}

/*
 * TUTORIAL
 */
.tutorial-test {
	background-color: #eeeeee;
	background-image: url('common/tutorial-quiz.png');
}

.tutorial-flashcard {
	background-color: #e9d0b5;
	background-image: url('common/tutorial-card.png');
}

.tutorial-test-vertical{
	background-color: #eeeeee;
	background-image: url('common/tutorial-quiz-vertical.png');
}



/*
 * HEADER
 */

.header {
	height:55px;
	background-color: white;
	background-image: url('common/mondadori.png');
	background-repeat: no-repeat;
	background-position: 5px 0px;
	border-bottom: 10px solid #E91231;
}

/*
 * CARD BAR
 */

 .cardtitle {
 	position: absolute;
 	right:10px;
 	top: 10px;
 	font-size: 20px;
	color: #E51937;
 	z-index: 2;
 	padding:5px;
 	right:10px;
 	overflow: hidden;
 	text-overflow:ellipsis;
 	white-space: nowrap;
 	font-weight: bold;
 	text-shadow:0 2px 2px #fff;
 	-moz-text-shadow:0 2px 2px #fff;
 	-webkit-text-shadow:0 2px 2px #fff;
 	-ms-text-shadow:0 2px 2px #fff;
	z-index: 9999;
 }

.cardbrowser {
	overflow: hidden;
	height:188px;
	width:100%;
	background-repeat: repeat-x;
	background-position: 0px 47px;
	margin:120px 0px 30px 0px;
	z-index: 12;
	position: relative;
}

.card {
	font-weight: bold;
	padding-right: 25px;
	width:197px;
	line-height: 165px;
	height:150px;
	background-repeat: no-repeat;
	text-align: right;
	font-size: 150px;
	color:#fff;
	color: rgba(255,255,255,);
	margin-right: 27px;	
	letter-spacing: -15px;
}

.card-1 {
	background-image:url('common/card1.png');
}

.card-2 {
	background-image:url('common/card1.png');
}

.card-3 {
	background-image:url('common/card1.png');
}

.cardindicator {
	height:30px;
	background-image: url('common/arrow.png');
	background-position: center;
	background-repeat: no-repeat;
}

/*
 * BUTTONS
 */

.button {
	width: 58px;
	height: 58px;
	margin: 2px;
}

.button-info {
	margin-top:20px;
	background-image:url('common/botton5.png');
}

.button-info:active {
	background-image:url('common/botton5on.png');
}

.button-prev {
	background-image:url('common/botton2.png');
}

.button-prev:active {
	background-image:url('common/botton2on.png');
}

.button-next {
	background-image:url('common/botton1.png');
}

.button-next:active {
	background-image:url('common/botton1on.png');
}

.button-first {
	background-image:url('common/botton4.png');
}

.button-first:active {
	background-image:url('common/botton4on.png');
}

.button-last {
	background-image:url('common/botton3.png');
}

.button-last:active  {
	background-image:url('common/botton3on.png');
}

.button-scrollup {
	margin:13px 0px 0px 10px;
	width: 31px;
	height: 31px;	
	background-image:url('common/up.png');
}

.button-scrollup:active {
	background-image:url('common/upon.png');
}


.button-scrolldown {
	margin:8px 0px 0px 10px;
	width: 31px;
	height: 31px;	
	background-image:url('common/down.png');
}

.button-scrolldown:active {
	background-image:url('common/downon.png');
}

.button-library {
	padding:0;
	margin: 0 0 0 35px;
	width: 84px;
	height: 29px;	
	background-image:url('common/return.png');
}

.button-flip {
	margin-left: 15px;
	margin-top: 6px;
	width: 69px;
	height: 80px;
	background-image:url('common/flip-arrow.png');
}

/*
 * LEFT DOCK
 */

.buttonsetleft {
	padding:15px;
	width: 131px;
	height: 75px;
	background-image: url('common/box3.png');
}

/*
 * RIGHT DOCK
 */

.buttonsetright {
	padding:18px;
	width: 125px;
	height: 125px;
	background-image: url('common/box-botton1.png');
}

/*
 * SCROLL DOCK
 */

.buttonsetscroll {
	bottom: 209px;
	width: 51px;
	height: 95px;
	background-image: url('common/box2.png');
}

/*
 * FLIP DOCK
 */

.buttonsetflip {
	bottom: 209px;
	width: 95px;
	height: 95px;
	background-image: url('common/box-flip.png');
}

.buttonsetflip-single {
	bottom: 0px;
	width: 95px;
	height: 95px;
	margin-bottom: 10px;
	background-image: url('common/box-flip.png');
}

/*
 * MINI LEFT DOCK
 */

.buttonsetminileft {
	bottom: 275px;
}

/*
 * PAGE
 */

.page {
	width:587px;
}

.cardviewer, .testviewer {
	font-size: 19px;
	color: #666
}

/*
 * FLASHCARD
 */

.side {
	height:397px;
}

.cardcontent-top {
	height: 41px;
	background-image: url('common/top.png');
	background-repeat: no-repeat;
}

.cardcontent-center {
	background-image: url('common/section.png');
	background-repeat: repeat-y;
	padding:0px 64px 0px 64px;
	text-align: center;
	width: 459px;
	line-height: 22px;
	min-height: 340px;
	font-weight: bold;
}

.cardcontent-bottom {
	height: 41px;
	background-image: url('common/bottom.png');
	background-repeat: no-repeat;
}

/*
 * TEST
 */

.testcontent-top {
	height: 41px;
	background-image: url('common/top.png');
	background-repeat: no-repeat;
}

.testcontent-center {
	background-image: url('common/section.png');
	background-repeat: repeat-y;
	padding:0px 64px 10px 64px;
	width: 459px;
	line-height: 22px;
}

.testcontent-bottom {
	height: 41px;
	background-image: url('common/bottom.png');
	background-repeat: no-repeat;
}

.debrief.right,.debrief.moduleright {
	color:#000;
	background: #a9db80; /* Old browsers */
	background: -moz-linear-gradient(top,  #a9db80 0%, #96c56f 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9db80), color-stop(100%,#96c56f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #a9db80 0%,#96c56f 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #a9db80 0%,#96c56f 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #a9db80 0%,#96c56f 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #a9db80 0%,#96c56f 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 ); /* IE6-9 */
	border-radius: 5px;
	border:2px solid #006e2e;
	display: inline-block;
}

.debrief.single {
	display: inline-block;
	white-space: nowrap;
	margin-right:10px;
	width:250px;
}

.debrief.right {
	width:80%;
	padding:10px;
	margin-bottom: 10px;
}

.debrief.moduleright {
	padding: 5px;
	line-height: 12px;
}

.debrief.intro {
	padding-bottom: 10px;
	width:80%;
	display: inline-block;
	line-height: 30px;
}

.debrief.text {
	padding: 10px 0px;
	line-height: 35px;
	width:80%;
	display: inline-block;
}
/*
 * TIMER
 */

.timer {
	margin-top: 5px;
	width: 69px;
	height: 80px;
	background-image:url('common/strip_timer.png');
}

.timer-0 { background-position: 0px 0px; }
.timer-1 { background-position: -69px 0px; }
.timer-2 { background-position: -138px 0px; }
.timer-3 { background-position: -207px 0px; }
.timer-4 { background-position: -276px 0px; }
.timer-5 { background-position: -345px 0px; }
.timer-6 { background-position: -414px 0px; }
.timer-7 { background-position: -483px 0px; }
.timer-8 { background-position: -552px 0px; }


/*
 * TEST
 */

.closebutton {
	position: absolute;
	right:10px;
	bottom: 10px;
	background-color: #f00;
	color: #fff;
	border-radius: 10px;
	width: 200px;
	padding: 5px;
	display: inline-block;
	cursor: pointer;
	text-decoration: underline;
}

.questionlink {
	display: inline-block;
	background-color: #f00;
	padding:5px 0px 5px 0px;
	width: 100%;
	border-radius: 10px;
	color:#fff;
	margin:0px 10px 0px 0px;
	text-align: center;
	z-index: 10;
	font-size: 14px;
}

.answer {
	opacity: 1;
}

.answer-right {
	transition:all 0.5s;
	-moz-transition: all 0.5s; /* Firefox 4 */
	-webkit-transition:all 0.5s; /* Safari and Chrome */
	-o-transition:all 0.5s; /* Opera */
	-ms-transition:all 0.5s; /* ie? */				
	background: #a9db80; /* Old browsers */
	background: -moz-linear-gradient(top,  #a9db80 0%, #96c56f 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9db80), color-stop(100%,#96c56f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #a9db80 0%,#96c56f 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #a9db80 0%,#96c56f 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #a9db80 0%,#96c56f 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #a9db80 0%,#96c56f 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 ); /* IE6-9 */
	border-radius: 5px;
	border:2px solid #006e2e;
	margin-top:17px;
	margin-bottom: 17px;
	padding:5px;
	opacity: 1;
}

.answer-wrong {
	opacity:0.5;
}

.singleright {
	color:#006e2e;
	font-weight: bold;
}

.singlewrong {
	color:#ff0000;
}

.greenbox {
	height:0px;
	overflow: hidden;
	transition:all 0.5s;
	-moz-transition: all 0.5s; /* Firefox 4 */
	-webkit-transition:all 0.5s; /* Safari and Chrome */
	-o-transition:all 0.5s; /* Opera */
	-ms-transition:all 0.5s; /* ie? */					
}

.greenbox-right {
	background: #a9db80; /* Old browsers */
	background: -moz-linear-gradient(top,  #a9db80 0%, #96c56f 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9db80), color-stop(100%,#96c56f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #a9db80 0%,#96c56f 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #a9db80 0%,#96c56f 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #a9db80 0%,#96c56f 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #a9db80 0%,#96c56f 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 ); /* IE6-9 */
	border-radius: 5px;
	border:2px solid #006e2e;
	margin-top:17px;
	margin-bottom: 17px;
	padding:5px;
	height:auto;
}

.greenboxinput {
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	width: 0px;
	padding:5px;
	height:8px;
	line-height: 8px;
	border-radius: 5px;
	transition:all 0.5s;
	-moz-transition: all 0.5s; /* Firefox 4 */
	-webkit-transition:all 0.5s; /* Safari and Chrome */
	-o-transition:all 0.5s; /* Opera */
	-ms-transition:all 0.5s; /* ie? */	
	margin-bottom: -5px;				
}

.greenboxinput-right {
	background: -moz-linear-gradient(top,  #a9db80 0%, #96c56f 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9db80), color-stop(100%,#96c56f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #a9db80 0%,#96c56f 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #a9db80 0%,#96c56f 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #a9db80 0%,#96c56f 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #a9db80 0%,#96c56f 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 ); /* IE6-9 */
	border:2px solid #006e2e;
	width:auto;
	margin-left:5px;
}

/*

.inputanswer {
	height:18px;
	margin:0px;
	padding: 0px;
	border-width: 1px;
}

.iconbox {
	border:1px solid #000;
	padding:0px 0px 0px 5px;
	margin: 0px;
	border-radius:10px;
	height:20px;
	line-height: 22px;
	display: inline-block;
}

.videoicon, .fileicon, .imageicon {
	width:20px;
	height:20px;
	margin: 0px 5px 0px 0px;
	padding: 0px;
	background-color: red;
	display: inline-block;
}
*/


/*POST*/
.answerbox-multiple .answer-wrong {
	transition:all 0.5s;
	-moz-transition: all 0.5s; /* Firefox 4 */
	-webkit-transition:all 0.5s; /* Safari and Chrome */
	-o-transition:all 0.5s; /* Opera */
	-ms-transition:all 0.5s; /* ie? */				
	background: #ffa0a0; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffa0a0 0%, #ff6868 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa0a0), color-stop(100%,#ff6868)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffa0a0 0%,#ff6868 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffa0a0 0%,#ff6868 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffa0a0 0%,#ff6868 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffa0a0 0%,#ff6868 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa0a0', endColorstr='#ff6868',GradientType=0 ); /* IE6-9 */
	border-radius: 5px;
	border:2px solid #a90329;
	padding:5px;
	margin-top:17px;
	margin-bottom: 17px;
	font-size:19px;
	color:#000;
	opacity: 1;
	font-size: 12px;
}

.answer-correction {
	transition:all 0.5s;
	-moz-transition: all 0.5s; /* Firefox 4 */
	-webkit-transition:all 0.5s; /* Safari and Chrome */
	-o-transition:all 0.5s; /* Opera */
	-ms-transition:all 0.5s; /* ie? */				
	background: #a9db80; /* Old browsers */
	background: -moz-linear-gradient(top,  #a9db80 0%, #96c56f 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9db80), color-stop(100%,#96c56f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #a9db80 0%,#96c56f 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #a9db80 0%,#96c56f 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #a9db80 0%,#96c56f 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #a9db80 0%,#96c56f 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 ); /* IE6-9 */
	border-radius: 5px;
	border:2px solid #006e2e;
	margin:5px 5px 0 5px;
	padding:5px;
	opacity: 1;
	font-size: 19px;	
}


.cell-right {
	transition:all 0.5s;
	-moz-transition: all 0.5s; /* Firefox 4 */
	-webkit-transition:all 0.5s; /* Safari and Chrome */
	-o-transition:all 0.5s; /* Opera */
	-ms-transition:all 0.5s; /* ie? */			
	background: #a9db80; /* Old browsers */
	background: -moz-linear-gradient(top,  #a9db80 0%, #96c56f 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9db80), color-stop(100%,#96c56f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #a9db80 0%,#96c56f 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #a9db80 0%,#96c56f 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #a9db80 0%,#96c56f 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #a9db80 0%,#96c56f 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 ); /* IE6-9 */
}

.cell-wrong {
	transition:all 0.5s;
	-moz-transition: all 0.5s; /* Firefox 4 */
	-webkit-transition:all 0.5s; /* Safari and Chrome */
	-o-transition:all 0.5s; /* Opera */
	-ms-transition:all 0.5s; /* ie? */			
	background: #ffa0a0; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffa0a0 0%, #ff6868 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa0a0), color-stop(100%,#ff6868)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffa0a0 0%,#ff6868 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffa0a0 0%,#ff6868 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffa0a0 0%,#ff6868 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffa0a0 0%,#ff6868 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa0a0', endColorstr='#ff6868',GradientType=0 ); /* IE6-9 */
}

.answer-draggable {
	cursor: pointer;
	padding-left:50px;
	padding-bottom:10px;
	padding-top:10px;
	background-image:url('common/pulsante_drag.png');
	background-repeat: no-repeat;
	background-position: left center;
}

.complex {
	font-size: 12px;
	width: 100%;
}

.complex .complex-header TD {
	border-bottom: 1px solid #000000;
	font-weight: bold;
	text-align: center;
}

.complex .complex-checkbox {
	padding:5px;
	text-align: center;
}

.complex .complex-checkbox .checkbox {
	display: inline-block;
	margin: 0;
	float:none;
}

.complex-result {
	margin: auto;
}

.complex-result-header TD {
	border-bottom:1px solid #ffffff;
}

.complex-result .complex-result-checkbox {
	padding:5px;
	text-align: center;
}