html, body {min-height: 100%; margin: 0; padding: 0; }

body
{ 
	background-image: url('../images/leftbglines.png'), url('../images/rightbglines.png');
	background-position: top left, top right;
	background-repeat: no-repeat;
}


h1 { text-align: center; margin-top: 0; padding-top: 20px;}
h1#main_heading 
{
	font-family: "Arial";
	font-weight: normal;
	height: 120px;
	line-height: 120px;
	padding-top: 0;
}
h2 
{ 
	font-size: 100%; 
	color: #9642b5;
	color: #e821a7;
	text-shadow: 5px 2px white;
	font-weight: normal;
}

div.quiz-row
{
	min-width: 1200px;
}
div.container
{
	min-width: 1140px;
}

#thequiz
{
	padding-top: 20px;
}

.sentence
{
	font-style: italic;
}

#tabs div.html5quiz
{
	background-image:  url('../images/leftbottombg.png'), url('../images/storlann.jpg');
	background-position:  bottom left, bottom right;
	background-repeat: no-repeat;
	font-size: 130%;
	min-height: 520px;

}

ul.ui-widget-header {
	background-image: none;
	background-color: inherit;
	border: 0;
	border-bottom: 1px solid #eee;
}
.ui-tabs ul.ui-tabs-nav {
	padding: 0.2em 3em 0px;
}



div#tabs 
{ 
	border: none;
	margin: 0;
	padding: 0; 
}
div.question, div#loading
{ 
	min-height: 60%; 
	 
	display: none; 
	width: 80%;
	
	padding: 0 5% 5% 5%;
	margin-bottom: 5%;
	/*margin-left: auto;
	margin-right: auto;*/
	/*border: 3px solid #777;*/
	
}
div#loading { display: block; }
div.question { min-width: 800px; }
li.qwrap
{
	margin-top: 15px;
	margin-bottom: 15px;
}

span.dndq
{
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	border: 2px solid grey;
	width: 290px;
	display: inline-block;
	height: 47px;
	line-height: 47px;
	font-size: 16px;
	text-align: center;

	border-radius: 10px;
	
	cursor: move;
	
	background-image: linear-gradient(bottom, rgb(235,235,235) 36%, rgb(255,255,255) 68%);
	background-image: -o-linear-gradient(bottom, rgb(235,235,235) 36%, rgb(255,255,255) 68%);
	background-image: -moz-linear-gradient(bottom, rgb(235,235,235) 36%, rgb(255,255,255) 68%);
	background-image: -webkit-linear-gradient(bottom, rgb(235,235,235) 36%, rgb(255,255,255) 68%);
	background-image: -ms-linear-gradient(bottom, rgb(235,235,235) 36%, rgb(255,255,255) 68%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.36, rgb(235,235,235)),
		color-stop(0.68, rgb(255,255,255))
	);		
}


span.dndq:active, span.fake-active, span.dndq:hover
{
	background-image: linear-gradient(bottom, rgb(163,222,250) 19%, rgb(205,246,247) 51%);
	background-image: -o-linear-gradient(bottom, rgb(163,222,250) 19%, rgb(205,246,247) 51%);
	background-image: -moz-linear-gradient(bottom, rgb(163,222,250) 19%, rgb(205,246,247) 51%);
	background-image: -webkit-linear-gradient(bottom, rgb(163,222,250) 19%, rgb(205,246,247) 51%);
	background-image: -ms-linear-gradient(bottom, rgb(163,222,250) 19%, rgb(205,246,247) 51%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.19, rgb(163,222,250)),
		color-stop(0.51, rgb(205,246,247))
	);
}

ol.sortable
{
	min-height: 240px;
}

.sortable-placeholder
{
    background-color: #ccc;
	width: 70%;
}

ul.clear { clear: both; }
div.question > ul li
{
	padding-top: 5px;
	padding-bottom: 5px;
}

div.question > ul li label
{
	padding-left: 2%;
}





a.audiolink{
	display:block;
	width: 97px;
	height: 98px;
	float: left;
	background-image: url('../images/audioicon.png');
	background-position: 0 0;
	margin: 0 10px 10px 0;
}
a.audiolink i { display: none; }
a.audiolink:hover { background-position: 0 98px;}


button.advance, button.reverse, button#lessonAgainButton, button#nextLessonButton
{
	min-width: 20%;
	height: 50px;
	display:block;
	float: right;
	font-size: 1.1em;
	clear: right;
	margin-top: 5%;
}

/*button.reverse
{
	float: left;
	clear: left;
}*/
button.advance, button#lessonAgainButton, button#nextLessonButton
{
	clear: both;
	background-color: #56c22e;
	color: #ffffff;
}
button#nextLessonButton, button#lessonAgainButton
{
	float: none;
}
button.mark
{
	background-color: #f1793c;
}
button.disabled
{
	background-color: #e8e8e8;
	color: #ffffff;
}
button#tryAgainButton, button#reviewButton
{
	display: block;
	font-size: 1.1em;
	padding: 2%;
	
}


div.question ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}

div.question ul.match_lists_gd, div.question ul.match_lists_en
{
	float: left;
	padding-left: 40px;
}

div.question ul.match_lists_en
{
	margin-left: 15px;
	
}
ul.audio_multiple_choice_list { clear: both; }
ul.audio_multiple_choice_list li
{ 
	margin: 1% 0 1% 0;
}

ul.match_lists_gd span.dndq,  ul.match_lists_en span.dndq
{
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	border: none;
	border-radius: 0px;
}

ul.match_lists_gd {
	z-index: 100;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
ul.match_lists_en {
	z-index: 50;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}		
ul.match_lists_en li {
	/*margin-left: -60px;*/
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
ul.match_lists_gd li span.dndq
{
	background-image: url('../images/lftcnt.png');
	background-repeat: no-repeat;
	padding: 5px 30px 5px 10px;
	cursor: auto;

}
ul.match_lists_gd li span.li_gd_hover
{
	background-image: url('../images/lftcnt_over.png');
	background-repeat: no-repeat;

}

ul.match_lists_en li span.dndq
{
	background-image: url('../images/rhtcnt.png');
	background-repeat: no-repeat;
	padding: 5px 10px 5px 30px;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}


input.audio_freetype_input
{
	display: block;
	padding: 1%;
	font-size: 110%;
	color: #000044;
	margin-top: 10%;
	margin-left: 11%;
	margin-bottom: 3%;
}

p.indicator
{
	font-size: 75%;
	color: #999;
	text-align: right;
	padding-top: 2%;
	clear: both;
}

.wrongAns
{
	color: #C43D3D;
}
.correctAns
{
	color: #4DC43D;
}
.feedback
{
	clear: both;
	
}

.tick, .cross, .manicule
{
    position: absolute;
    color: #4DC43D;
    left: 0;
    margin-left: 0;
    top: 0;
	margin-top: 0;
    font-size: 150%;
}
.match_lists_gd .tick, .match_lists_gd .cross, .match_lists_gd .manicule
{
	left: -15%;
}
.cross { color: #C43D3D; }
.manicule
{
	text-shadow: 2px 2px 2px #000000;
	/*left: -8%;*/
}

#intro_0 >h2, #tabs-2>h2
{
	font-size: 130%;
	margin-top: 10px;
	margin-bottom: 20px;
}
#introleft
{
	display: inline-block;
	vertical-align: top;
	/*width:50%;*/
	width: 90%;
}

.question_text
{
	margin-right: 200px;
	min-width: 470px;
	overflow: auto;
}
.match_lists .question_text
{
	margin-right: 0;
	min-width: 760px;
	overflow: visible;
}
.dnda_q .question_text
{
	margin-right: 0;
	min-width: 760px;
	overflow: visible;
	float: left;
}
#introleft 
{
	width: 70%;
	float:left;
}
#introright, .question_illustration
{
	float: right;
	clear: right;
	padding-top: 30px;
	/*display: inline-block;
	width: 40%;
	vertical-align: middle;*/
}
.question_illustration
{
	position: relative;
}
#introright>img, .question_illustration>img
{
/*	width: 80%;*/
/*	height: 80%;*/
}


.multiple_choice_list >li 
{
	padding: 3% 3% 3% 10px;
}
.multiple_choice_list >li:hover
{
	background-color: #eeeeee;
} 
.multiple_choice_list >li:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

.multiple_choice_list >li >input
{
    float: left;
    width: 10%;
    
}
.multiple_choice_list >li >label
{
	float: left;
	width: 79%;
	cursor: pointer;
}
.multiple_choice_list >li >label:hover
{
	cursor: pointer;
}

.missing_words_select
{
	margin: 10px;
	padding: 2px;
}

.selectable .ui-selecting {
background: #ccc;
}
.selectable .ui-selected {
	background-color: #c0ffee;
	background-color: rgba(0, 0, 255, 0.3);
	box-shadow: 5px 5px 3px #cccccc;
}

.droptarget
{
	float:right;
	
}

.drop-hover
{
	border: 4px solid blue;
}

.dnd_answers
{
	float: left;
}


li.hili, li.dnda
{
	float: left;
	padding: 3%;
	margin: 16px;
}
li.hili:nth-child(odd), li.dnda:nth-child(even)
{
	clear: left;
	
}
li.hili:hover
{
	border: 3px solid #dddddd;
	margin: 13px;
	cursor: crosshair;
	box-shadow: 5px 5px 3px rgba(244,244,244,0.8);
}

li.dnda
{
	clear: both;
}
li.dnda:hover
{
	border: 3px solid #eeeeee;
	margin: 13px;
	cursor: move;
	box-shadow: 5px 5px 3px rgba(244,244,244,0.8);
}

li.inzone
{
	background-color: rgba(255, 0, 0, 0.75);
	color: white;
	border: 1px solid white;
	border-radius: 6px;
}

.clock
{
	padding-top: 20px;
}




.feedback_ml
{
	clear: both;
}

div.question ul.wrong_ml
{
	list-style: disc outside none;
	font-size: 18px;
	margin-left: 20px;
	margin-bottom: 20px;
	color: #f1793c;
}


div.question[data-qtype="missing_words"] div.question_text
{
	overflow: visible;
}
div.question[data-qtype="missing_words"] div.tick, 
div.question[data-qtype="missing_words"] div.cross, 
div.question[data-qtype="missing_words"] div.manicule 
{
	margin-left: -25px;
}

p.missing_words_para
{
	line-height: 50px;
}

/************************** wordsearch overrides ***************************************/

#wordsearch
{
	min-width: 920px;
}
#needHelp
{
	margin: 50px auto 0 auto;
	background-color: #f1793c;
	color: #ffffff;
	height: 50px;
	font-size: 20px;
	line-height: 50px;
}
#rf-wordcontainer 
{
	border: 2px dotted #0DFFFF;
	background-color: #C6FFFF;
	border-radius: 0;

}
.rf-tablestyle
{
	border: 2px solid #777777;
}

#rf-searchgamecontainer
{
	padding: 20px;
}

/***************************************************************************************/



/************************** speech bubbles ***************************************/
/* ------------------------------------------
PURE CSS SPEECH BUBBLES
by Nicolas Gallagher
- http://nicolasgallagher.com/pure-css-speech-bubbles/

http://nicolasgallagher.com
http://twitter.com/necolas

Created: 02 March 2010
Version: 1.2 (03 March 2011)

Dual licensed under MIT and GNU GPLv2 Nicolas Gallagher
------------------------------------------ */

/* NOTE: Some declarations use longhand notation so that it can be clearly
explained what specific properties or values do and what their relationship
is to other properties or values in creating the effect */




/* ============================================================================================================================
== OVER SPEECH BUBBLE, EMPTY, WITH BORDER (more CSS3)
** ============================================================================================================================ */

.feedback {
  position:absolute;
  min-height: 160px;
  top: 50px;
  left: 130px;
  width: 320px;
  z-index: 50;
  margin-left: -420px;
  padding: 40px 40px;

  border:8px solid #f3961c;
  text-align:center;
  color:#333;
  background-color:rgba(255,255,255,0.85);
  /* css3 */
  /*
  NOTES:
  -webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
  -webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
  Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
  */
  -webkit-border-top-left-radius:240px 140px;
  -webkit-border-top-right-radius:240px 140px;
  -webkit-border-bottom-right-radius:240px 140px;
  -webkit-border-bottom-left-radius:240px 140px;
  -moz-border-radius:240px / 140px;
  border-radius:240px / 140px;
  
  line-height: 30px;
}

/* creates larger curve */
.feedback:before {
  content:"";
  position:absolute;
  z-index:2;
  top:70px;
  right:-40px;
  width:50px;
  height:30px;
  border-style:solid;
  border-width:0 10px 10px 0;
  border-color:#f3961c;
  margin-right:-10px;
  background:transparent;
  /* css3 */
  -webkit-border-bottom-right-radius:40px 50px;
  -moz-border-radius-bottomright:40px 50px;
  border-bottom-right-radius:40px 50px;
  /* reduce the damage in FF3.0 */
  display:block;
}

/* creates smaller curve */
.feedback:after {
  content:"";
  position:absolute;
  z-index:2;
  top: 75px;
  right:-70px;
  width:50px;
  height:50px;
  border-style:solid;
  border-width:0 10px 10px 0;
  border-color:#f3961c;
  margin-right:20px;
  background:transparent;
  /* css3 */
  -webkit-border-bottom-right-radius:40px 50px;
  -moz-border-radius-bottomright:40px 50px;
  border-bottom-right-radius:40px 50px;
  /* reduce the damage in FF3.0 */
  display:block;
}

/* creates a small circle to produce a rounded point where the two curves meet */
.feedback > :first-child:before {
  content:"";
  position:absolute;
  z-index:1;
  top:65px;
  right:-95px;
  width:10px;
  height:10px;
  margin-right:45px;
  background:#f3961c;
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

/* creates a white rectangle to cover part of the oval border*/
.feedback > :first-child:after {
  content:"";
  position:absolute;
  z-index:5;
  top: 100px;
  right:-30px;
  width:40px;
  height:15px;
  background:rgba(255,255,255,0.85);
  border-radius: 0 0 14px 0;
}