*{margin:0;padding:0;overscroll-behaviour:contain;}
html{margin:0 auto; font-size: 100%;
-webkit-font-smoothing: antialiased !important;
overscroll-behaviour:contain;
}

#lengther{
top:0px;
left:0px;
position:absolute;
z-index:999;
white-space: pre;
height:auto;
width:auto;
}

body{	
	background-color:#ffffff;
	width:100%;
	height:100%;
}
.cloze {
	/*white-space: nowrap;*/	
	border: solid 1px #bbb;
	background-color:#fff;
	position:fixed;	
	text-align:centre;
	display:none;
	width:100%;
	overscroll-behaviour:contain;
}

.exercise {
	/*width:auto;*/
	padding:10px;	
	overflow-y:scroll;		
}

.wordList {
	float:left;
	background-color:#979797;
	padding:10px;
	padding-right:16px;
	border: solid 1px #bbb;
	padding-right:30px;
	overflow-y:scroll;
}

.text, .target, .drag, .dropRight, .dropWrong, .dd select , .ddPrintOptions {
	/*font-family:arial;
	font-size:22px;*/
	color:#505050;
	text-align:left;
	/*width:auto;*/
	height:auto;
}

img{}

.text, .target, .drag, .dropRight, .dropWrong, .ddPrintOptions {
	margin-right:6px;	
	margin-bottom:10px;	
}

.target, .dropRight, .dropWrong {display:inline-block;}

.target, .drag, .dropRight, .dropWrong {
	border: solid 1px #bbb;	
	text-align:center;	
}

.drag, .target, .dropRight, .dropWrong {	
	padding-bottom:0px;
	margin-bottom:0px;
}

.drag
{
	margin-bottom:6px; /*space out word list */
	border: outset 1px #bbb;
}

.text, .ddPrintOptions {
	text-align:left;
	padding-top:1px; /*make up for not having 1px outer border: very important otherwise messes up wrapping! */
	padding-bottom:1px;
	/*background-color:#22eef5;*/
	/*border: 1px solid #bbb;*/
}

.dd select, .ddRight select, .ddWrong select
{
	margin-top:0px;
}

.target, .dropWrong {
	background-color:#eeeeee;
	white-space: nowrap;	
}

.drag {cursor: move;}

.drag, .dropRight, .ddRight {
	/*background-color:#FEFF33;*/
	background-color:#fefefe
}

.dropRight, .dropWrong {
	background-repeat: no-repeat;
	background-position: right bottom;
}

.ddRight, .ddWrong{
	background-repeat: no-repeat;
	background-position: right 16px bottom; /*doesn't work pre IE8*/
}

.dropRight, .imgRight, .ddRight {
	background-image: url("tick.png");	
}

.dropWrong, .imgWrong, .ddWrong {
	background-image: url("cross.png");
	color:#888
}

.noImage{
	background-image: url("");
}

.title
{
	width:100%;
	display:block;
	/*background-color:#666666;*/
	background-color:#dcdcdc;
	color:#333;
	font-size: 2.5em;
	font-weight:bold;
	font-family: arial;
	padding:4px;	
	text-align:center;
}

.description
{
font-size:1em;
font-style:italic;
font-family:times;
color:#999999;
}

.footer {
height:30px;
background-color:#222;
font-family: arial;
padding:2px;
color:#eee;
font-size:1em;
}

.counter{padding-top:8px;}

.counter, .footerIcon{
float:left;margin-right:10px;
padding-right:10px;
border-right: solid 1px #fff;
height:30px;
}

.footerIcon{cursor:pointer;}

.imgRight, .imgWrong {
	width:16px;
	height:16px;
	float:left;
	margin-right:2px;
}

#footer input{
	font-size:1.1em;
	width:200px;
}

.version{
	float:right;
	font-family:arial;
	font-size:0.7em;
}

.loading{
  display:in-line;
  background-image: url("loading.gif");
  width:16px;
  height:16px;
  background-repeat:none;
}

.footnote{
display:block;
margin-top:10px;
font-size:0.8em;
font-family:arial;
color:#222;
text-align:center;
}
.footer img{cursor:pointer;}

#printout{display:none;background-color:#fff}

:-webkit-full-screen , :-moz-full-screen, :-ms-fullscreen, :full-screen, :fullscreen{
  width:100%;height:100%
}

/* deeper elements */
:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}

.blackout{
	position:absolute;
	width:100%;
	height:100%;
	background-color:#000;
	z-index:998;
	opacity: 0.8;
	top:0px;
	left:0px;
    filter: alpha(opacity=80); /* For IE8 and earlier */
	display:none;
}

.dialog{
	display:none;
	position:absolute;
	top:0px;
	left:0px;z-index:999;
	width:490px;
	height:166px;
	background-color:#fefefe;
	padding:20px;
	border: #eee 2px solid;
	font-family:arial;
	font-size:1.1em;
}

.dialogMenu
{
	border-bottom: 2px solid #eee;	
	height:auto;
	height:30px;
	margin-bottom:20px;
}

.dialogItemActive, .dialogItemInactive, #dialog a.dialogItemInactive:hover, #dialog a {	
	display:inline-block;
	float:left;
	height:30px;
	margin-right:10px;	
	border-bottom: 2px solid #CD202F;
	/*border: 1px solid #000;*/
	color:#333;
	text-decoration:none;
	font-weight:bold;
	font-size:1.1em;
}

#dialog .dialogItemInactive
{
	border-bottom: none;
	color:#A8A8A8;
}