@charset "utf-8";
/*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

CSS Created by Chialab.it

http://www.chialab.it 2014

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

*/

/*...........................................

Resets and defaults

...........................................*/

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; }
video{ background: #000; }
[hidden] { display: none; }

html {font-size:100%; }
body{ margin: 0; font-size:1em; line-height:1.5em; width: 100% !important; /*height:100%; overflow-y: auto;  position: fixed*/}

html, body {
	padding: 0;
	height: 100%;
	overflow: hidden;
}

::-moz-selection { background: #efde8f; text-shadow: none; }
::selection { background: #efde8f; text-shadow: none; }

a { color: #006699; text-decoration:none;}
a:visited { }
a:hover { text-decoration:none; }
a:focus { outline: 0; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote {
	margin: 1rem 0 1rem 0;
	border-left: 1px solid #CCC;
	padding: 0 0 0 2rem;
}
dfn {  }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0 0 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }

/*sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }*/

ul, ol { margin: 0 0 0 0; padding-left: 2em;}
dd { margin: 0 0 0 0; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
p+ol, p+ul {
	margin-top: 1em;
}

img { border: 0; -ms-interpolation-mode: bicubic; /* vertical-align: middle; */}
img:only-child { margin: 0 }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; padding: 5px;}

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }

* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-user-drag: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-touch-callout:none !important;
	/*-webkit-user-select: none;*/
}

input, textarea, [contenteditable=true] {
	-webkit-user-select: auto;
}

h1,h2,h3,h4,h5,h6,hgroup,
ul,ol,dd,
p,figure,
pre,table,fieldset,hr{
	margin-top:0px;
	margin-bottom:1.5rem;
}


.message {
	display:block;
	width:auto;
	border:1px solid silver;
	padding:1.5rem; margin:1.5rem 0 1.5rem 0;
	line-height:1rem;
}

.message H2 {
	margin:0 0 0.75rem 0;
}

.message.error H2 { color:red; }

textarea, input[type=text], input[type=password], input[type=email] {
	-webkit-appearance: none;
	-moz-appearance : none;
}

.hide-text {
	display:none !important;
}

audio, video {
	display: block;
	margin-bottom: 10px;
}

audio, video, img {
	height: auto;
	max-width: 100%;
}

audio:only-child, video:only-child, img:only-child {
	margin-bottom: 0px;
}

audio {
	height: 30px;
	margin-right: 10px;
	vertical-align: middle;
}

.relative {
	position: relative;
	display: inline-block;
}

/*...........................................

Structure Styles

...........................................*/
/*
body > * {
	display:none;
}
*/
.wrapper {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: block;
}

section.main {
	min-width: 640px;
	height: 100%;
	display: inline-block;
	width: 100%;
	padding-top: 50px;
	margin-top: -50px;
}

section.main[data-fontsize="2"] {
	font-size: 1.5em;
}

section.main[data-fontsize="3"] {
	font-size: 2em;
}

.main_panel {
	display: inline-block;
	position: relative;
	z-index: 10;
	background: white;
	float: left;
	width: 55%;
	height: 100%;
	overflow: hidden;
	padding-right: 5px;
	padding-bottom: 80px;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
}

.main_panel ::-moz-selection { background: transparent; text-shadow: none; }
.main_panel ::selection { background: transparent; text-shadow: none; }

.main_panel.no-ref-doc {
	display:none;
}

.main_panel.only-document {
	width: 100%;
}

.navigator_panel {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 40px;
	z-index: 800;

	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;

	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);

	transition: transform 250ms, opacity 250ms;
	-webkit-transition: -webkit-transform 250ms, opacity 250ms;
	-moz-transition: -moz-transform 250ms, opacity 250ms;
	-o-transition: -o-transform 250ms, opacity 250ms;
	-ms-transition: -ms-transform 250ms, opacity 250ms;

	opacity: 1;
	display: none;
}

.navigator_panel.hide {
	-webkit-transform: translateY(-20px);
	-moz-transform: translateY(-20px);
	-o-transform: translateY(-20px);
	-ms-transform: translateY(-20px);
	transform: translateY(-20px);
	opacity: 0;
}

.task_panel {
	display: inline-block;
	width: 45%;
	height: 100%;
	background: #ebe4db;
	position: relative;

	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	padding-bottom: 80px;
	float: right;
	overflow: hidden;
	padding-right: 5px;
}

.main_panel.no-ref-doc + .task_panel{
	width: 100%;
	max-width: 100%;
}

.main_panel.no-ref-doc + .task_panel .iscrollwrapper{
	padding: 30px 0;

}

.main_panel.only-document + .task_panel{
	display: none;
}

.task_panel:before {
	content:'';
	display:block;
	position:fixed;
	z-index:50;
	margin: 140px 0 0 -25px;
	width: 50px;
	height: 50px;
	background: #ebe4db;

	transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;

	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);

	/* box-shadow: inset 10px -10px 16px rgba(0,0,0,0.02); */
}

.no-ref-doc + .task_panel:before {
	display: none;
}

.scrollwrapper {
	position: absolute;
	width: auto;
	bottom: 20px;
	top: 20px;
	z-index: 200;
	overflow: hidden;
	left: 0;
	right: 2px;
	margin: auto;
}

.scrollwrapper.scrollable {
	overflow: auto;
	position: relative;
	-webkit-overflow-scrolling: touch;
	height: 100%;
}
.scrollwrapper.scrollable.fullscreen{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 9999
}

.scrollwrapper .iscrollwrapper > * {
	padding-bottom: 50px;
}

.main_panel .iscrollwrapper{
	padding: 0 30px;
}

.task_panel .scrollwrapper {
	padding-left: 30px;
}

.iscrollwrapper {
	position: relative;
	min-height: 100%;
	padding: 30px 0;
}

.caption {
	color:#444;
	margin-bottom: 15px;
	font-size: .9em;
	line-height: 1.3em;
	font-weight: 100;
}

A.gethelp, A.getinfohelp {
	cursor: help !important;
}

.gethelp.icon-info, .getinfohelp.icon-help {
	/* background-color: orange; */
	color: orange;
	padding: 0px;
	position: relative;
	height: 30px;
	display: inline-block;
	vertical-align: baseline;
	font-size: 30px;
	top: 4px;
	margin-bottom: 10px;
}

/*...........................................

Panels headers

...........................................*/

header {
	background-color: #ff9900;
	display: table;
	width: 100%;
	line-height:1.75rem;
	position: relative;
	z-index: 1000;
	height: 51px;
	width: 100%;
	padding-top: 5px;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
}

header H1, header .number, header .progress, header nav {
	margin:0; padding:0px;
	display:table-cell;
}

header H1 * {
	display: inline;
}

header .number {
	min-width: 25px;
	font-size: .75rem;
	color:#FFF;
	padding-right: 5px;
	font-weight: 100;
}

header .activity_number {
	color: #FFF;
	display: none;
	font-weight: 100;
}

header .tools {
	position: absolute;
	top: 15px;
	right: 15px;
}

header .progress, header nav {
	text-align:right;
	color:#FFF;
}

.task_panel header {
	background-color: #eb8900;
	color:#FFF;
	padding-left: 35px;
}

header.scrolled {
	box-shadow: -5px 0px 25px rgba(0,0,0,.2);
}
.task_panel header.scrolled {
	box-shadow: 10px 0px 25px rgba(0,0,0,.2);
}

header .titles, header .options, header .score {
	display: table-cell;
	padding: 0px 10px 0px 5px;
	white-space: nowrap;
	line-height: 24px;
}

header .score .icon-prev, header .score .icon-next{
	position: relative;
	top: 3px;
}

header .score .icon-prev.off, header .score .icon-next.off {
	opacity: 0.2;
}

header .score {
	width: 100%;
	font-size: 30px;
	color: white;
	padding-left: 20px;
}

header[data-assets-length="0"],
header[data-assets-length="1"] {
	cursor: default;
}

header[data-assets-length="0"] .score,
header[data-assets-length="1"] .score,
header[data-assets-length="0"] .icon-menu,
header[data-assets-length="1"] .icon-menu {
	display: none;
}

header .options {
	/*background: #ec8b00;*/
	width: 0;
}

header .options LI {
	display:inline-block;
	margin-right: 15px;
	color:#444;
	font-size: 32px;
	position: relative;
	top: 2px;
	cursor: pointer;
}

header .options LI#percentageScore:before {
	font-size: 30px;
	position: absolute;
	top: -5px;
	left: 0px;
}

header .options LI#percentageScore {
	font-weight: 100;
	font-size: 18px;
	vertical-align: top;
	text-align: center;
	line-height: 35px;
	height: 40px;
	margin-right: 0;
	/* width: 40px; */
	padding: 0 5px;
	position: relative;
	top: -2px;
	z-index: 1001;
	transform-origin: 75% 25%;
	-webkit-transform-origin: 75% 25%;
	border-radius: 8px;
	border: solid 2px #444;

	-webkit-transition: all 200ms;
	-moz-transition: all 200ms;
	-o-transition: all 200ms;
	-ms-transition: all 200ms;
	transition: all 200ms;
}

header[data-exercises-length="0"] .options LI#percentageScore {
	display: none;
}

header .options LI#percentageScore.highlight {
	background-color: #ed6b06;
	color: white;
	border: solid 2px transparent;
	box-shadow: 0 0 10px 0px #A72121;
}

header .options LI#percentageScore:after {
	/* content: '%'; */
	font-size: 14px;
}

header .options LI#percentageScore.highlight:after {
	content: '';
	font-size: px;
}

header .options LI.hover {
	color: #666;
}

header:after {
	display: block;
	content: " ";
	background: url('../img/bar.png');
	width: 100%;
	height: 10px;
	position: absolute;
	left: 0;
	top: 51px;
	z-index: 1000;
}

header .progressline {
	display: block;
	content: " ";
	background: #E08700;
	width: 100%;
	max-width: 0%;
	height: 10px;
	position: absolute;
	left: 0;
	top: 51px;
	z-index: 1001;

	opacity: 0.85;
	-webkit-transition: max-width 200ms;
	-moz-transition: max-width 200ms;
	-o-transition: max-width 200ms;
	-ms-transition: max-width 200ms;
	transition: max-width 200ms;
}

footer {
	height: 40px;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #ed6b06;
	background-repeat: no-repeat;
	background-position: 28px center;
	z-index: 2000;
	padding: 10px 20px;
    display: flex;
    align-items: stretch;
}


footer:before {
	display: block;
	content: " ";
	background: url('../img/bar.png');
	width: 100%;
	height: 10px;
	position: absolute;
	left: 0;
	bottom: 100%;
	z-index: 1000;
}

/*...........................................

main_panel

...........................................*/

.content {
	display: inline-block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.content ul li, ol li{ margin: 0 0 0 0; margin-bottom: 0.5em;}

.main_panel {
	/* box-shadow: 0px 0px 25px rgba(0,0,0,.2); */
}

.main_panel p {
	margin: 0;
	padding: 20px 0 0 0;
}

.main_panel h2 {
	margin: 0;
	padding: 0px 20px 0px 0px;
	font-family: "Georgia", serif;
	line-height: 130%;
	margin-bottom: 20px;
	padding: 20px 30px 0px 0px;
}

.main_panel h2:first-child {
	padding-top: 0
}

.gray {
	color: #999;
}

.main_panel H1 {
	margin-bottom: 1em;
}

.main_panel .active {
	display: block !important;
	color: rgb(68, 68, 68);
	margin: 0;
	width: 100%;
	position: relative;
}

article .textnumber {
	font-size:1em;
	line-height:1em;
	width:25px;
	height:25px;
	text-align:right;
	color:orange;
	position: absolute;
	display:  inline;
	left: -45px;
}


.main_panel .cover figure {
	margin:0;
	height:220px;
	overflow: hidden;
}

.main_panel .cover figure figcaption {
	/*background-color: #e5e5e5;*/
	text-align: right;
	padding-right:20px;
	font-size: 0.75em;
	color:#999;
}

.main_panel .cover .intro {
	margin:10px 20px 20px 50px;
}

.main_panel .minimap {
	background: white;
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 10;
	transform-origin: 100% 100%;
	-webkit-transform-origin: 100% 100%;
	-webkit-transform: scale(0.2);
}


.main_panel .media-image {
	margin: 0;
	width:100%;
	margin-top: -50px;
}

.main_panel .media-image img {
	max-width: 100%;}

.media-audio {
	display: inline-block;
}

.body .media-audio:first-child {
	/* margin-top: 10px; */
}

.body table {
	width: auto !important;
	height: auto !important;
}

/*...........................................

navigator_panel

............................................*/

.navigator_panel .scrollwrapper {
	position: static;
	max-height: 100%;
	padding: 20px 18px 10px 18px;
	background-color: #FFF;
	box-shadow: 0 0px 40px rgba(0,0,0,0.25);
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	border-bottom: solid 10px #FFF;
}

.navigator_panel .tablerow:nth-child(-n+3) {
	border-top:0px;
}

.navigator_panel .tablerow {
	position: relative;
	display: inline-block;
	cursor: pointer;
	width: 31%;
	vertical-align: top;
	margin-bottom: 0;
	padding: 5px 20px 22px 0px;
	border-top: 1px solid #d5d5d5;
	min-height: 55px;
	margin-right: 3%;
}

.navigator_panel .tablerow:nth-child(3n) {
	margin-right: 0%;
}

.navigator_panel .tablerow .numb_container {
	position: relative;
	height: 100%;
}

.navigator_panel .tablerow.completed h3:after {
	content: '\e608';
	color: orange;
	margin-left: 5px;
	font-size: 30px;
	line-height: 30px;
	vertical-align: middle;
	font-family: icomoon;
}

.navigator_panel .tablerow .numb_container h3 {
	display: block;
	position: relative;
	color: #00669C;
	margin-top: 18px;
	margin-bottom: .1em;
	line-height: 1.1em;
	font-size: 1.1rem;
}

.navigator_panel .tablerow .numb_container h3,
.navigator_panel .tablerow .numb_container p {
	margin-left: 64px;
}

.navigator_panel .tablerow .numb_container div.description {
	display: block;
	position: relative;
	margin-top: 0px;
	margin-left: 55px;
}

.navigator_panel .tablerow.last {
	height: 100%;
}

.navigator_panel .tablerow.on ~ .tablerow.last {
	height: 10px;
}

.navigator_panel .numb {
	font-weight: 400;
	display:inline-block;
	background-color: #999;
	width: 50px;
	height: 50px;
	padding-top:3px;
	text-align:center;
	border-radius: 100%;
	font-size:16px;
	color:white;
	cursor: pointer;
	position: absolute;
	border: solid 10px white;
	margin-top: -11px;
}

.navigator_panel .tablerow.hover .numb {
	border-color:#CCC;
}

.navigator_panel .on .numb, .navigator_panel .tablerow.hover.on .numb {
	background-color: orange;
	border:10px solid #666;
	width:50px;
	height:50px;
}

.navigator_panel.deselected:after {
	display: none;
}

.navigator_panel .tablerow P:empty {
	display:none;
}

/*...........................................

task_panel

...........................................*/

.task_panel [data-reset-activity]{
	cursor: pointer;
}

.task_panel .menu {
	padding: 0px 20px 20px 0px;
	list-style:none;
	/* padding-right: 20px; */
	margin: 0;
	display:  block;
	height: 50%;
}

.task_panel .menu > div {
	padding: 0;
	height: 100%;
	margin: 0;
	line-height: 1.35em;
}

.task_panel .menu > div.on {
	display: block;
}

.task_panel .menu div div.description, .navigator_panel div.description {
	color:#444;
	font-weight: 100;
	display: inline;
	margin: 0;
}

.task_panel .menu div div.description {
	font-weight: 400;
}

.task_panel .body {
	color:#444;
	line-height: 1.5em;
	position: relative;
	margin-bottom: 10px;
	width: 100%;
	display: inline-block;
}

.ui-answers .body, .ui-targets .body {
	display: inline;
}

.task_panel .body:empty {
	display: none;
}

.task_panel .body P {
	margin:0;
}

.task_panel TD .body, .task_panel TD P {
	display: inline;
	padding:0px;
}

.task_panel TD .body:empty {
	display: none;
}

.task_panel .menu div .asset {
	margin: 1em 0em 1em 0px;
}

.task_panel .menu div .asset .media {
	position: relative;
	z-index: 5;
	display: inline-block;
	max-width: 100%;
}

.task_panel .menu div .asset .media img {
	display: block;
	margin-bottom: 10px;
}

.task_panel .menu div .asset .media .relative {
	max-width: 100%;
}

.media-file {
	width: 100%;
}

.media-file iframe {
	height: 75vh;
	max-width: 1024px;
	background: #FFF;
	max-height: 768px;
}

.task_panel .menu div .asset p .media {
	vertical-align: middle;
	line-height: 0;
	white-space: normal;
}

.task_panel .menu div .asset .exercise {
	position: relative;
	/* https://github.com/PearsonItalia/pearson_player_2014/issues/496 */
	/*z-index: 10;*/
	border-bottom: 5px solid #CCC;
	padding-bottom: 1em;
	/* overflow: hidden; */
}

.task_panel .menu A {
	cursor: pointer;
}
.task_panel .menu .collection_title,
.task_panel .menu .quiz:first-child [data-id]:only-child h3:not(.title_hidden) {
	border-bottom: 5px solid #CCC;
	padding: 0px 0.8em 0.4em 0px;
	margin: 0px 0em 0.4em 0px;
	color: #00669C;
	line-height: 130%;
	font-size: 1.5em;
	display: block;
	width: 100%;
}
.task_panel .menu H3 {
	margin:0;
	color: #444;
	display: inline-block;
	margin-right: 5px;
}

.task_panel .menu H3.title_hidden,
.task_panel .menu H3.title_hidden + .gethelp {
	display: none;
}

.task_panel .menu H4 {
	display: inline-block;
	color: #333;
	font-size: 1em;
}

.task_panel .menu H4:empty {
	display: none;
}
/*
.task_panel .menu H3:after {
	content:'. ';
}
*/
/*...........................................

typography

...........................................*/

BODY, figcaption {
	font-family: 'Verdana Pro', sans-serif;
	font-weight: normal;
}

H1, H2, H3, H4, H5, H6 {
	font-family: 'Verdana Pro Condensed', sans-serif;
	font-weight: normal;
	margin:.375em 0 .375em 0;
}

H1 {
	font-size:1.5rem;
}

H2 {
	font-size: 1.5em;
	margin-bottom: 1.5em;
	color: #444;
	margin-top: 0;
}

H3 {
	font-size: 1.3em;
	line-height: 1.4em;
}

H4 {
	font-weight:400;
	font-size:1.2em;
}

.main_panel article {
	font-family: 'Georgia', serif;
	color:#444;
	font-size: 1.15em;
	line-height: 1.35em;
	padding: 30px;
}

.main_panel article .body {
	position: relative;
}

iframe{
	width: 100%;
	border: none;
}

.task_panel .asset {
	font-weight: 100;
}

/*...........................................

scrollbar

...........................................*/

::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}
::-webkit-scrollbar-track {
	border-radius: 0px;
}
::-webkit-scrollbar-thumb {
	background-color: rgba(50,50,50,0.2);
}

.iScrollVerticalScrollbar {
	position: absolute;
	top: 20px;
	right: 0px;
	bottom: 20px !important;
	width: 10px;
	margin: auto;
}

.iScrollVerticalScrollbar .iScrollIndicator{
	width: 70%;
	background-color: rgba(50,50,50,0.2);
	margin-left: 15%;
}

/**** MODALS ****/
.modal {
	position: fixed;
	z-index: 5000;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	top: 51px;
	-webkit-user-select: none;
	user-select: none;
}

/*.modal .modalpanel:before{
	content: '';
	border-bottom: solid 10px white;
	border-left: solid 10px transparent;
	border-right: solid 10px transparent;
	position: absolute;
	bottom: 100%;
	right: 22px;
}*/

.modal.center .modalpanel:before{
	display: none;
}

.modal .modalpanel{
	background: white;
	padding: 0;
	border-radius: 8px;
	min-width: 300px;
	max-width: 500px;
	position: absolute;
	top: 0;
	right: 20px;
	margin-right: -42px;
	opacity: 0;

	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	-o-transform: translateY(-10px);
	-ms-transform: translateY(-10px);
	transform: translateY(-10px);

	transition: transform 250ms, opacity 250ms;
	-webkit-transition: -webkit-transform 250ms, opacity 250ms;
	-moz-transition: -moz-transform 250ms, opacity 250ms;
	-o-transition: -o-transform 250ms, opacity 250ms;
	-ms-transition: -ms-transform 250ms, opacity 250ms;

	box-shadow: 0 10px 40px 3px rgba(99, 99, 99, 0.2);
	font-weight: 100;
	font-size: .9rem;
	line-height:1.35em;
	border: solid 1px #D3D3D3;
	border-bottom: solid 4px #AAA6A6;
	cursor: pointer;

	max-height: 70%;
	min-height: 260px;
}

.modal .modalpanel.settings {
	min-height: 0;
	height: auto;
}

.modal .modalpanel:before{
	content: '';
	border-bottom: solid 10px white;
	border-left: solid 10px transparent;
	border-right: solid 10px transparent;
	position: absolute;
	bottom: 100%;
	right: 11px;
	width: 0;
	height: 0;
}

.modal.center .modalpanel{
	right:0;
	left: 0;
	margin: auto;
	top: -10px;
}

.modal.center .modalpanel:after{
	content: '';
	font-family: icomoon;
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 100%;
	position: absolute;
	bottom: 100%;
	right: 15px;
	margin-bottom: -25px;
	background: #ed6b06;
	color: white;
	line-height:50px;
	text-align: center;
	font-size: 30px;
	cursor: pointer !important;
}

.modal.center .modalpanel:before{
	content: '';
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	position: absolute;
	bottom: 100%;
	right: 55px;
	margin-bottom: -18px;
	background: #FFBC57;
	border: none;
}

.modal.open .modalpanel{
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-o-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
}

.modal .modalpanelwrapper{
	max-height: 500px;
	overflow: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	position: relative;
	padding: 20px;
}

[data-rel="score"].modal .modalpanel{
	width: 460px;
}

[data-rel="score"].modal .modalpanelwrapper{
    margin: 20px;
    padding: 0;
    max-height: 50vh;
    overflow: auto;
    min-height: 220px;
}

.modal .modalcontent {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	padding-right: 20px;
	margin: 20px;
	max-height: 50vh;
	min-height: 220px;
}

.modal .modalpanelwrapper::-webkit-scrollbar { width: 6px; }
.modal .modalpanelwrapper::-webkit-scrollbar-track { border-radius: 0px; background-color: #f5f5f5; }
.modal .modalpanelwrapper::-webkit-scrollbar-thumb { background-color: #CCC; }

#scoreTable thead {
	background: #f5f5f5;
	text-align: left;
	cursor: default;
}

#scoreTable tr {
	border-bottom: solid 1px #CCC;
}

#scoreTable tr.activeTask {
	background: #EDEEF7;
	cursor: default;
}

#scoreTable td, #scoreTable th {
	padding: 10px;
}

#scoreTable td * {
	display: inline;
}

#scoreTable th {
	font-size: 0.75em;
}

#scoreTable tr:not(.activeTask) td:first-child {
	color: #00669C;
}

#scoreTable tr:last-child {
	border-bottom: none;
}

#scoreTable tr:last-child td:first-child {
	color: black;
	font-weight: bold;
}

.modal input[type='range'].slider, .slider {
	-webkit-appearance: none !important;
	-moz-appearance : none !important;
	background: #CCC;
	height: 5px;
	margin: 15px 0 25px 0;
	outline: none !important;
	border: none;
	position: relative;
	width: 87%;
	margin: 0 auto;
}
.slider {
	-webkit-appearance: none !important;
	-moz-appearance : none !important;
	background: #CCC;
	height: 5px;
	outline: none !important;
	border: none;
	position: relative;
	width: 87%;
	margin: 15px auto;
}

.slider .ui-slider-handle {
	-webkit-appearance: none !important;
	background: #ff9900;
	height: 30px;
	width: 30px;
	border-radius: 100%;
	border: none;
	border-bottom: solid 2px #999;
	top: -10px;
	position: absolute;
	z-index: 2;
	margin-left: -20px;
	-ms-touch-action: none;
touch-action: none;
}

.modal input[type='range'].slider::-webkit-slider-thumb,.slider .ui-slider-handle {
	-webkit-appearance: none !important;
	background: #ff9900;
	height: 30px;
	width: 30px;
	border-radius: 100%;
	border: none;
	border-bottom: solid 2px #999;
	top: -10px;
	position: absolute;
	z-index: 2;
	margin-left: -20px;
}


.modal input[type='range'].slider::-moz-slider-thumb {
	-moz-appearance : none !important;
	background: #ff9900;
	height: 30px;
	width: 30px;
	border-radius: 100%;
	border: none;
	border-bottom: solid 2px #999;
}

.modal input[type='range'].slider::slider-thumb {
	appearance : none !important;
	background: #ff9900;
	height: 30px;
	width: 30px;
	border-radius: 100%;
	border: none;
	border-bottom: solid 2px #999;
}

.modal input[type='range'].switcher {
	-webkit-appearance: none !important;
	-moz-appearance : none !important;
	background: #F5F5F5;
	height: 30px;
	margin: 0;
	outline: none !important;
	width: 60px;
	border-radius: 15px;
	padding: 4px;
	border: solid 1px #DFDFDF;
}

.modal input[type='range'].switcher:active {
	box-shadow: inset 0 0 25px rgba(0,0,0,0.1);
}

.modal input[type='range'].switcher::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	-moz-appearance : none !important;
	border-radius: 100%;
	height: 24px;
	width: 24px;
	background: #666;
	border: none;
}

.limView #limViewSwitcher::-webkit-slider-thumb {
	background: #ff9900;
}

.modal table {
	width: 100%;
	margin-bottom: 0;

}

.modal table#scoreTable {
	min-width: 400px;
}

.modal table td{
	padding: 0;
	vertical-align: top;
}

.modal table.switchers tr{
	border-bottom: solid 1px #CCC;
}

.infohelp {
	display:none;
}

.feedback_ok,.feedback_part,.feedback_failed {
	display:none;
	font-weight: 100;
	padding:0px 0px 20px 0;
	border-bottom:5px solid #CCC;
	margin-bottom:20px;
	margin-right:15px;
}
.feedback_ok {
	color:green;
}

.feedback_part {
	color:#cc6600;
}

.feedback_failed {
	color:red;
}

#splashscreen {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3000;
	background: #ebe4db;
	opacity: 1;
	padding-top: 60px;
	background-image: url('../img/logo-splash.png');
	background-size: 100px;
	background-repeat: no-repeat;
	background-position: bottom 10px left 20px;

}

#splashscreen .error-loading {
	display: none;
	text-align: left;
	width: 300px;
	height: 300px;
	padding-top: 20px;
	white-space: nowrap;
	margin: 0 auto;
}

#splashscreen .error-loading .log {
	color: #999;
}

/*** dev tools ***/
#devutils {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	right: 10px;
	height: 40px;
	line-height: 40px;
}

#devutils li{
	float: left;
	font-size: 12px;
}

#devutils li a{
	color: black !important;
}

#devutils li + li{
	margin-left: 10px;
}

#devutils li + li:before{
	content: '|';
	display: inline-block;
	margin-right: 10px;
}

.jsonitem {
	color: #666;
	font-size: 12px;
	position: absolute;
	margin-left: 10px;
}

.spinner {
  margin: 0 auto;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #ed6b06;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}