BODY
{
	background-color:#C3EEFA;
	font-family:Arial,sans-serif;
	font-size:17px;
}

h1 {
	font-family: Arial,sans-serif;
	font-weight: bold;
	font-size: 21px;
	color: #0078c8;
	margin: 0;
	padding: 0;
}

/*	main layout
*/

/* Page Header
*/
#page-header
{
	height:138px;
	background:transparent url(../media/theme/bg-header.png) no-repeat;
	padding: 0px 20px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
}
#logo
{
	display:none;
}

/*	Profile & Profile language select form
*/

#profile
{
	color:white;
	background-image:url(../media/theme/icon-profileX.png);
	height: 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#profile:hover
{
	color:white;
	background-image:url(../media/theme/icon-profileX.png);
}
#profile-form
{
	margin-top:138px;
	background:transparent url(../media/theme/bg-profile.png) 0 0 repeat-y;
}
#disable
{
	top:2px;
	background-image:url(../media/theme/bg-disable.png);
	background-repeat:repeat-y;
}

#profile-form .header
{
	color:black;
}
#profile-form .app-support A
{
	background-image:url(../media/theme/button-support.png);
}
#profile-submit A
{
	background-image:url(../media/theme/button-profile-ok.png);
}
#profile-form .option
{
	color:white;
	font-weight: bold;
}
#profile-level .option .support
{
	font-weight:normal;
	color:black;
}
#profile-level .option .audio.inline
{
	background-image:url(../media/theme/icon-audio-black.png);
}

/* Header Menu
*/
#art-menu {
	font-size: 14px;
	font-weight: bold;
	color: white;
	font-family: Arial, Helvetica, Sans-Serif;
	font-style: normal;

}

#art-menu UL {
	display: flex;
	flex-direction: row;
	padding: 0px;
	list-style: none;
}

#art-menu LI {
	padding-left: 10px;
}

#art-menu A {
	color: white;
	text-decoration: none;
	border-right: 2px solid white;
	padding-right: 6px;
}

#art-menu a:hover
{
	color: #D74100;
}



/*	pages header and tabs
*/
.page.main .header
{
	background-image:url(../media/theme/bg-main-header-white.png);
	padding-top: 0px;
}
.page.login .header
{
	background-image:url(../media/theme/bg-login-header.png);
}
.page.main .body, .page.main .body.lines
{
	background-image:url(../media/theme/bg-main-body-white.png);
}
.page.lesson .header
{
	background-image:url(../media/theme/bg-lesson-header.png);
	padding-top: 0px;
}
.page.lesson .body
{
	background-image:url(../media/theme/bg-lesson-body.png);
}

.tab.lessons
{
	width:123px;
}
.tab.lessons A
{
	background-image:url(../media/theme/tab-main-lessons-white.png);
}
.tab.results
{
	width:151px;
}
.tab.results A
{
	background-image:url(../media/theme/tab-main-results-white.png);
}
.tab.words, .tab.lesson-words
{
	width:138px;
}
.tab.words A
{
	background-image:url(../media/theme/tab-main-words-white.png);
}
.tab.lesson-words A
{
	background-image:url(../media/theme/tab-lesson-words.png);
}
.tab.lesson
{
	width:94px;
}
.tab.lesson A
{
	background-image:url(../media/theme/tab-lesson.png);
}

#close-lesson
{
	left:7px;
}
#close-lesson A
{
	background-image:url(../media/theme/button-close-lesson.png);
}

#lesson-index
{
	display:none;
}
#lesson-title
{
	left:120px;
	color:#0078c8;
}

.page .header .app-support
{
	left:80px;
	top:9px;
}
.page .header .wcag-support
{
	left:120px;
	top:9px;
}
.page .header .app-support A
{
	background-image:url(../media/theme/button-support.png);
}


/*	pages body
*/
.page .body
{
	padding:4px 0px 20px 2px;
	background-repeat:repeat-y;
}
.page.login .body
{
	background-image:url(../media/theme/bg-login-body.png);
}


/*	login page
*/
#login
{
	background-image:url(../media/theme/bg-login.png);
}
#login .button A
{
	background-image:url(../media/theme/button-login-ok.png);
}


/*	support
*/
.popover
{
	position:absolute;
	left:200px;
	top:100px;
	
	min-width:70px;
}
.popover-body .content
{
	font-size:17px;
}


/*	main pages
*/
#lessons
{
	margin-left:0px;
	font-size:17px;
}
#lessons .lesson
{
	margin:0 0 0px 11px;
	height:198px;
	width:224px; /* 3-col */
	width:164px;

	background-image:none;
	color:#5fb5e1;
}
#lessons .lesson.no-icon
{
	background-image:url(../media/theme/bg-lesson-no-icon.png);
	background-position:50% 0;
}
#lessons .lesson .icon
{
	height:122px;
	margin-top:0;
	margin-bottom:4px;
}
#lessons .lesson .icon IMG
{
	width:120px;
	height:120px;
	margin-top:1px;
}
#lessons .lesson .icon .shadow
{
	position:absolute;
	left:50%;
	top:0;
	margin-left:-61px;
	margin-top:0;
	border:1px solid #0078c8;	
}
#lessons .lesson .title
{
	margin-left:50px; /* 3-col */
	margin-left:20px;
	text-align:left;
}
#lessons .lesson.enabled
{
	color:#0078c8;
}
#lessons .lesson.optional
{
	color:#b3b3b3;
}
#lessons .lesson.optional .icon .shadow
{
	border-color:#bbbbbb;
}

#lessons .lesson.enabled:hover .shadow
{
	border-color:#d74100;
}
/*
#lessons .lesson.optional:hover
{
	color:#0078c8;
}
*/
#lessons .lesson .state
{
	left:158px; /* 3-col */
	left:128px;
	top:90px;
	background-image:url(../media/theme/icon-lesson-state.png);
}
#lessons .lesson.optional .state
{
	background-image:url(../media/theme/icon-lesson-state-optional.png);
}
#lessons .lesson .state.active
{
	background-image:url(../media/theme/icon-lesson-stateX.png);
}

#lesson-words
{
	padding-left:78px;
}
#lesson-words .word
{
	padding-left:40px;
}
#lesson-words .view.inline
{
	background-image:url(../media/theme/icon-view.png);
}
#lesson-words .speech.inline
{
	background-image:url(../media/theme/icon-speech.png);
}

#results 
{
	padding-top:0;
	color:#0078c8;
}
#results .state
{
	background-image:url(../media/theme/icon-lesson-state.png);
}
#results .lesson-result
{
	background:transparent url(../media/theme/bg-wordlist-fill.png) 0 0 repeat-y;
}
#results .lesson-result.closed 
{
	color:#6ebce3;
}
#results .lesson-result .button.reset
{
	top:19px;
	width:110px;
}
#results .lesson-result .button.reset A
{
	background-image:url(../media/theme/button-opnieuw-main.png);
}
.result
{
	color:#333333;
}
.progress-bar
{
	margin-top:5px;
}

#word-tabs
{
	width:45px;
	text-align:left;	
}
#word-tabs A
{
	padding-left:12px;
	color:white;
}
#word-tabs A:hover
{
	color:#0078c8;
}
#word-tabs A.selected
{
	font-weight:bold;
	color:#0078c8;
	/*background-color:#b7dcef;*/
	background-color:white;
}
.word
{
	background-image:none;
	color:black;	
}
.word.alt
{
	background-position:0 0;
	background-image:url(../media/theme/bg-wordlist-fill.png);
	background-repeat:repeat-y;
}
#lesson-words .word.alt
{
	background-image:url(../media/theme/bg-wordlist-lesson.png);
}
.word span.speech.inline
{
	float:left;
	margin-right:5px;
}


/*	lesson pages
*/
.page.lesson .body
{
	/*padding-top:22px;*/
}
.page.lesson .support
{
	background-color:#ffe8d9;
}
.page.lesson .support.composite
{
	background-color:#ffe8d9;
	border-bottom:1px solid #d74100;
}

#lesson-sections .navigation .next A
{
	width:100px;
	background-image:url(../media/theme/button-verder.png);
}
#lesson-sections .navigation .next.check A
{
	background-image:url(../media/theme/button-kijk-na.png);
}
#lesson-sections .navigation .prev A
{
	width:100px;
	background-image:url(../media/theme/button-terug.png);
}
#lesson-sections .section .contents,
#support .section .contents,  
#tasks
{
	margin-left:40px;
}
#tasks
{
	padding-top:22px;
}


/*	lesson side-bar (sections)
*/
#lesson-sidebar .section
{
/*
	height:44px;*/
	padding-right:0;
	margin-left:16px;
}
#lesson-sidebar .section.done
{
	background-position:2px 50%;
	background-image:url(../media/theme/icon-section-done.png);
}
#lesson-sidebar .section.selected
{
	background-color:white;
}
#lesson-sidebar .section A
{
	width:62px;
	background-position:10px 0;
	background-repeat: no-repeat;
}
#lesson-sidebar .section A:hover
{
	background-position:10px 100%;
}
#lesson-sidebar .section.selected A
{
	background-position:10px 100% !important;
}
#lesson-sidebar .section.video A
{
	background-image:url(../media/theme/icon-section-video.png)
}
#lesson-sidebar .section.theory A
{
	background-image:url(../media/theme/icon-section-theory.png)
}
#lesson-sidebar .section.tasks A
{
	background-image:url(../media/theme/icon-section-tasks.png)
}
#lesson-sidebar .section.results A
{
	background-image:url(../media/theme/icon-section-results.png)
}
#lesson-sidebar .section.video.disabled A
{
	background-image:url(../media/theme/icon-section-video-disabled.png)
}
#lesson-sidebar .section.theory.disabled A
{
	background-image:url(../media/theme/icon-section-theory-disabled.png)
}
#lesson-sidebar .section.tasks.disabled A
{
	background-image:url(../media/theme/icon-section-tasks-disabled.png)
}
#lesson-sidebar .section.results.disabled A
{
	background-image:url(../media/theme/icon-section-results-disabled.png)
}


/*	contents
*/
#video
{
	margin-left:40px;
}
.inline, /* audio icon */
#word-list .nl .audio.inline
{
	background-image:url(../media/theme/icon-audio.png);
}
.popover .audio.inline
{
	background-image:url(../media/theme/icon-audio-white.png);
}
.audio.large.inline
{
	height:44px;
	width:50px;
	background-image:url(../media/theme/icon-audio-large.png);
}
.view.inline
{
	background-image:url(../media/theme/icon-view.png);
}

.speech.inline
{
	background-image:url(../media/theme/icon-speech.png);
}

.section.results .progress-bar
{
	margin-top:5px;
}
.section.results .button.reset
{
	padding-top:22px;
}
.section.results .button.reset A
{
	width:110px;
	background-image:url(../media/theme/button-opnieuw.png);
}


/*	task tabs, instructions
*/
#task-tabs
{
	position:relative;
	height:22px;
}
#task-tabs .line
{	
	left:40px;
	top:14px;

	right:40px;
	min-width:642px;
	height:1px;
	background-color:#d74100;
}
#task-tabs .label
{
	top:0px;
	width:42px;
	height:28px;
	padding:3px 0 0 8px;
	
	background-image:url(../media/theme/bg-task-tab-label-small.png);
}
#task-tabs .label.open A
{
	color:#d74100;
}
#task-tabs .label.done A
{
	color:#d74100;
	background-image:url(../media/theme/icon-section-done.png);
	background-position: 0 3px;
	padding-left:14px;
}

.instructions
{
	padding:5px 0px 4px 0px;
	border:0px;
	background-image:none;

	color:#0078c8;
	width:98%;
}
.instructions IMG.icon
{
	float:left;
	cursor:pointer;
	border:0px;
	margin:-1px 18px 0 0 !important;
}
.instructions A
{
	background-image:url(../media/theme/button-instructions.png);
}
#tasks .instructions
{
	margin-bottom:30px;
}


/*	tasks
*/
.task
{
	margin-bottom:33px;
}
.task .bg
{
	border:1px solid #d74100;
	background-image:none !important;
}
.task-footer
{
	line-height:11px;
}
.task-body .bg.left .type
{
	display:none;
}
.task-body .content
{
	font-weight:normal;
}
.task-body .bg.left
{
	border-width:1px 0 0 1px;
}
.task-body .bg.right
{
	border-width:1px 1px 0 0;
}
.task-footer .bg.left
{	
	border-width:0 0 1px 1px;
}
.task-footer .bg.right
{
	border-width:0 1px 1px 0;
}


/*	multi-choice
*/
.task .mc .check
{
	background-image:url(../media/theme/checkbox.png);
}
.task .mc .check.correct
{
	background-image:url(../media/theme/checkbox-correct.png);
}
.task .mc .check.fail
{
	background-image:url(../media/theme/checkbox-fail.png) !important;
}
.task .mc.images .check
{
	background-image:url(../media/theme/checkbox-image.png);
}
.task .mc.images .check.correct
{
	background-image:url(../media/theme/checkbox-image-correct.png);
}
.task .mc.images .check.fail
{
	background-image:url(../media/theme/checkbox-image-fail.png) !important;
}


/*	drag-drop
*/
.task .drag IMG,
.task .dd.images .drop IMG
{
	width:138px;
	height:138px;
	border:1px solid #0078c8;
}
.task .drag.correct .audio.inline
{
	background-image:url(../media/theme/icon-audio-correct.png);
}
.task .drag.incorrect .audio.inline
{
	background-image:url(../media/theme/icon-audio-incorrect.png);
}


/*	content layout
*/
HR
{
	border-color:#d74100;
}
.illustration
{
	border:1px solid #0078c8;
	float:left;
}
.extra
{
	border:1px solid #FF6600;
	background-color:#FFD1B2;
	float:left;
	width:93%;
}

.instruction{
	height:230px;	
}

#profile {
	background-image: url('../media/theme/icon-profile2.png');
}

#profile .name {
	text-decoration: none;
}