HTML
{
	/* force (empty) scrollbar display, to keep layout centered
	*/
	/*overflow-y:scroll;*/
}

BODY
{
	margin:0;
	padding:0;
	
	background-color:#f2f2f2;

	color:black;
	font-family:Helvetica,Arial,sans-serif;
	font-size:18px;
	line-height:22px;
	
	width:100%;
}
BODY A
{
	color:black;
}
BODY A:hover
{
	text-decoration:none;
}


/*	main layout
*/
#centered
{
	width:800px;
	position:relative;
	margin:0px auto;
	min-height:610px;
	z-index:1;
}
#page-header
{
	height:40px;
	overflow-y:auto;
}
#logo
{
	position:absolute;
	left:22px;
	top:12px;
	cursor:pointer;
}
#profile
{
    min-width: 20px;
    height: 20px;
    padding-right: 25px;
    background: transparent url(../media/icon-profile.png) no-repeat;
	background-position: right;
    line-height: 25px;
    cursor: pointer;
}
#profile:hover
{
	color:#777777;
}

#profile-form
{
	display:none;
	position:relative;
	margin-top:40px;
	padding-left:80px;
}
#logout
{
    min-width: 30px;
    height: 27px;
    /* padding-right: 30px; */
    background: transparent url(../media/icon-logout.png) no-repeat;
    background-position: right;
    background-size: contain;
    line-height: 30px;
    cursor: pointer;
}
#logout a
{
    right: 0;
    position: absolute;
    width: 35px;
    height: 30px;
}
#pages
{
	position:relative;
	margin-left:-2px;
	margin-top:-2px;
}
#disable
{
	display:none;
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background:transparent url(../media/bg-disable.png) 2px 2px no-repeat;
}
	
.page
{
	display:none;
}
.clear
{
	/*	class to force parent height for element with float childnodes
	*/
	clear:both;
	display:block;
	height:0;
	font-size:0;
	line-height:0;
	overflow:hidden;
	position:relative;
}

.button A
{
	width:100%;
	display:block;
	background-position:50% 0%;
}
.button A:hover
{
	background-position:50% 100%;
}

#overlay
{
	z-index:100;
	position:fixed;
	left:0;
	top:-137px; /* 1px onscreen, otherwise FF doesn't enable flash */
	width:100%;
}
#recorder-support,
#recorder
{
	display: block;
	position:absolute;
	left:0;
	top:0;
	width:215px;
	height:138px;
}


/*	profile
*/
#profile-form .header
{
	color:#999999;
}
#profile-form P
{
	margin:11px 0 22px 25px;
}
#profile-languages
{
	margin-bottom:11px !important;
}
#profile-name
{
	margin-bottom:33px !important;
}
#profile-form .app-support
{
	position:absolute;
	left:21px;
	top:8px;
	width:22px;
	height:22px;
}

#profile-form-footer
{
	height:24px;
	padding-right:130px;
	padding-bottom:30px;
}
#profile-submit
{
	width:80px;
	height:24px;
	margin:auto;
}
#profile-submit A
{
	height:24px;
	background-image:url(../media/button-login-ok.png);
	background-repeat:no-repeat;
}
#profile-form .in
{
	width:175px !important;
}
#profile-form .option
{
	position:relative;
	float:left;
	width:205px;
	min-height:44px;
	margin-right:18px;
	cursor:pointer;
}
#profile-form .option .button
{
	float:right;
	width:22px;
	height:22px;
}
#profile-form .option .button A
{
	height:22px;
	background-image:url(../media/icon-support.png);
}

#profile-level .option
{
	width:680px;
}
#profile-level .option .support
{
	width:540px;
	padding-left:10px;
	color:#999999;
}
#profile-level .option SPAN
{
	float:left;
}
#profile-level .option .audio.inline
{
	float:none;
}



/*	pages header and tabs
*/
.page .header
{
	height:77px;
	padding:2px 4px 0 2px;
	background-repeat:no-repeat;
}
.page.login .header
{
	background-image:url(../media/bg-login-header.png);
}
.page.main .header
{
	background-image:url(../media/bg-main-header.png);
}
.page.lesson .header
{
	background-image:url(../media/bg-lesson-header.png);
}
.page .header .tabs
{
	position:absolute;
	right:6px;
	top:2px;
	height:38px;
}
.page .header .tabs .tab
{
	float:right;
	position:relative;
	height:38px;
}
.page .header .tabs .tab A
{
	height:38px;
	display:block;
}
.page .header .tabs .tab A.selected
{
	background-position:50% 100% !important;
}

.tab.lessons 
{
	width:134px;
}
.tab.lessons A
{
	background-image:url(../media/tab-main-lessons.png);
}
.tab.results
{
	width:164px;
	margin-left:-4px;
}
.tab.results A
{
	background-image:url(../media/tab-main-results.png);
}
.tab.words, .tab.lesson-words
{
	width:150px;
	margin-left:-4px;
}
.tab.words A
{
	background-image:url(../media/tab-main-words.png);
}
.tab.lesson-words A
{
	background-image:url(../media/tab-lesson-words.png);
}
.tab.lesson
{
	width:124px;
}
.tab.lesson A
{
	background-image:url(../media/tab-lesson.png);
}

#close-lesson
{
	position:absolute;
	left:5px;
	top:5px;
	width:30px;
	height:30px;
}
#close-lesson A
{
	height:30px;
	background-repeat:no-repeat;
	background-image:url(../media/button-close-lesson.png);
}

#lesson-index
{
	position:absolute;
	left:0px;
	width:76px;
	top:55px;

	text-align:right;
	font-weight:bold;
	font-size:21px;
}
#lesson-title
{
	position:absolute;
	left:87px;
	top:55px;
	
	font-size:21px;
}

.page .header .wcag-support
{
	position:absolute;
	left:130px;
	top:8px;
	width:22px;
	height:22px;
	
	display:none;
}
.wcag-support A
{
	height:22px;
	background-image:url(../media/icon-wcag-enter.png);
}

.page .header .app-support
{
	position:absolute;
	left:90px;
	top:8px;
	width:22px;
	height:22px;
	
	display:none;
}
.app-support A
{
	height:22px;
	background-image:url(../media/icon-support.png);
}


/*	pages body
*/
.page .body
{
	padding:4px 0px 20px 2px;
	background-repeat:repeat-y;
}
.page .body P
{
	margin:0 0 22px 0;
	clear:both;
}
.page .body .tab
{
	display:none;
}
.page.login .body
{
	background-image:url(../media/bg-login-body.png);
}
.page.main .body
{
	background-image:url(../media/bg-main-body.png);
	color:white;
	padding-left:80px;
}
.page.main .body.lines
{
	background-image:url(../media/bg-main-body-lines.png);
}
.page.main .body .dimmed
{
	color:#bebebe;
}
.page.lesson .body
{
	background-image:url(../media/bg-lesson-body.png);
}


/*	login page
*/
#login
{
	position:relative;
	margin-top:22px;
	
	height:160px;
	background:transparent url(../media/bg-login.png) 50% 0 no-repeat;

	text-align:center;
}
#login .button
{
	position:relative;
	width:80px;
	height:24px;
	margin:auto;
}
#login .button A
{
	height:24px;
	background-image:url(../media/button-login-ok.png);
	background-repeat:no-repeat;
}
#code
{
	width:180px;
	margin:55px 0 20px 0;
	padding:1px 5px;

	font-family:helvetica,arial,sans-serif;
	font-size:20px;
	font-weight:bold;
	color:#cccccc;
}


/*	support
*/
.popover
{
	position:absolute;
	left:200px;
	top:100px;
	
	min-width:70px;
	z-index:1000;
}
.popover-body, .popover-footer
{
	position:relative;
	max-width:300px;
}
.popover.app-support .popover-body,
.popover.app-support .popover-footer
{
	max-width:none;
}
.popover .bg
{
	position:absolute;
	top:0px;
	bottom:0px;
	width:50%;
	background-repeat:no-repeat;
	
	z-index:0;
}
.popover .bg.left
{
	left:0px;
	background-position:0 0;
}
.popover .bg.right
{
	right:0px;
	background-position:100% 0;
}
.popover-body .bg.left
{
	background-image:url(../media/bg-popover-left.png);
}
.popover-body .bg.right
{
	background-image:url(../media/bg-popover-right.png);
}
.popover-body .content
{
	position:relative;
	padding:8px 20px 0 20px;
	z-index:1;
	
	/*text-align:center;*/
	
	font-weight:bold;
	font-size:19px;
	color:white;
}
.popover.app-support .popover-body .content
{
	width:496px;
	/*height:415px;*/
}
.popover-body .content #support-video
{
	width:496px;
	height:279px;
	margin-bottom:10px;
}

.popover-body .content.view
{
	padding:12px 12px 2px 12px;
}
.popover-body .content IMG.view
{
	width:160px;
	height:160px;
}
.popover-body .content .rec
{
	float:none;
	margin-left:0;
}
.popover-body .content P
{
	margin:11px 0 0 0;
	padding-bottom:11px;
}
.popover-footer
{
	height:10px;
}
.popover-footer .bg.left
{	
	background-image:url(../media/bg-popover-footer-left.png)
}
.popover-footer .bg.right
{
	background-image:url(../media/bg-popover-footer-right.png)
}
.popover-arrow
{
	position:absolute;
	bottom:-10px;
	left:15px;
	width:20px;
	height:10px;
	
	background:transparent url(../media/bg-popover-arrow.png) 0 100% no-repeat;
}
.popover-arrow.top
{
	bottom:auto;
	top:-10px;
	background-position:0 0;
}
.popover-arrow.right
{
	left:auto;
	right:15px;
}


/*	main pages
*/
#lessons
{
	margin-left:-10px;
}
#lessons .lesson
{
	position:relative;
	float:left;
	
	margin:18px 0 4px 11px;
	
	width:226px;
	height:176px;

	background:transparent url(../media/bg-lesson-icon.png) 50% 10px no-repeat;
	
	text-align:center;
	font-weight:bold;
	color:#004640;
}
#lessons .lesson.no-icon
{
	background-image:url(../media/bg-lesson-icon+.png);
}
#lessons .lesson .icon
{
	position:relative;
	height:100px;
	margin-top:20px;
	margin-bottom:17px;
}
#lessons .lesson .icon IMG
{
	width:100px;
	height:100px;
}
#lessons .lesson.enabled
{
	color:white;
	cursor:pointer;
}
#lessons .lesson.optional
{
	color:#004640;
}
#lessons .lesson.training
{
	font-style:italic;
}
#lessons .lesson .state, #results .state
{
	position:absolute;
	left:165px;
	top:108px;
	width:28px;
	height:26px;
	background:transparent url(../media/icon-lesson-state.png) 0 0 no-repeat;
}

#lesson-words
{
	padding:22px 0 0 80px;
}
#lesson-words .view.inline
{
	background-image:url(../media/icon-view-dark.png);
}
#lesson-words .speech.inline
{
	background-image:url(../media/icon-speech-dark.png);
}

#results 
{
	padding-top:22px;
}
#results .state
{
	left:-35px;
	top:-3px;
}
#results .lesson-result
{
	position:relative;
	font-weight: bold;
	margin-bottom:22px;
}
#results .lesson-result.closed
{
	color:#004640;
}
#results .lesson-result.training SPAN:first-child
{
	font-style:italic;
}
#results .lesson-result .index
{
	float:left;
	width:32px;
	margin-right:6px;
	text-align:right;
}
#results .lesson-result .result
{
	padding-left:60px;
	font-weight:normal;
}
#results .lesson-result .button.reset
{
	position:absolute;
	left:570px;
	top:17px;
	width:115px;
}
#results .lesson-result .button.reset A
{
	height:24px;
	background-image:url(../media/button-opnieuw-main.png);
}
.result
{
	height:22px;
}
.result DIV
{
	position:relative;
	float:left;
}
.result .detail
{
	font-style:italic;
}
.progress-bar
{
	margin:2px 10px 0 15px;
	width:266px;
	height:18px;
	background:transparent url(../media/bg-progress-bar-main.png) 0 0 no-repeat;
}
.progress
{
	height:18px;
	background:transparent url(../media/bg-progress.png) 0 0 no-repeat;
}
.progress.fail
{
	background-position:0 100%;
}

#words
{
	position:relative;
	min-height:572px;
}
#word-tabs
{
	position:absolute;
	left:-45px;
	top:0px;
	width:30px;
	text-align:center;	
}
#word-tabs A
{
	display:block;
	color:#cccccc;
	text-decoration:none;
}
#word-tabs A:hover
{
	color:white;
}
#word-tabs A.selected
{
	font-weight:bold;
	color:white;
}
.word
{
	padding-left:30px;
	background:transparent url(../media/bg-wordlist.png) 0 18px no-repeat;
	
	font-weight:bold;
	min-height:22px;
}
.word.alt
{
	background-position:0 -5px;
}
.word .nl, .word .translation
{
	display:block;
	position:relative;
	float:left;
	width:50%;
}
.word .translation
{
	color:black;
	font-weight:normal;
}
.word span.speech.inline
{
	float:right;
	margin-right:12px;
}


/*	lesson pages
*/
.page.lesson .body
{
	/*position:relative;*/
	/*padding-top:22px;*/
	
}
.page.lesson .body .dimmed
{
	color:#9e9e9e;
}
.page.lesson .support
{
	padding:0 2px;
	background-color:#f2e0e7;
}
.support.button
{
	padding:0 !important;
	background-color:transparent !important;
}
.page.lesson .support.composite
{
	background-color: #cecece;
}
#lesson-sidebar
{
/*
	position:relative;
	float:left;
	width:78px;
	padding:18px 0 4px 0;
*/
	position:absolute;
	left:2px;
	top:101px;
	width:78px;
}
#lesson-sections
{
	/*position:relative;*/
	margin-left:78px;
	/*padding-left:78px;*/
	padding-top:22px;
	
	max-width:722px;
}
#lesson-sections .navigation
{
	clear:both;
	height:24px;
	padding:17px 50px 22px 0px;
}
#lesson-sections .navigation .button
{
	float:right;
	margin-left:10px;
}
#lesson-sections .navigation .next A
{
	width:105px;
	height:24px;
	background-image:url(../media/button-verder.png);
}
#lesson-sections .navigation .next.check A
{
	background-image:url(../media/button-kijk-na.png);
}
#lesson-sections .navigation .prev A
{
	width:95px;
	height:24px;
	background-image:url(../media/button-terug.png);
}
#lesson-sections .section .contents, 
#tasks
{
	margin-left:30px;
	margin-right:25px;
}


/*	lesson side-bar (sections)
*/
#lesson-sidebar .section
{
	height:44px;
	padding-right:8px;
}
#lesson-sidebar .section.done
{
	background-image:url(../media/icon-section-done.png);
	background-position:8px 50%;
	background-repeat:no-repeat;
}
#lesson-sidebar .section A
{
	float:right;
	width:50px;
	height:44px;
}
#lesson-sidebar .section.video A
{
	background-image:url(../media/icon-section-video.png)
}
#lesson-sidebar .section.theory A
{
	background-image:url(../media/icon-section-theory.png)
}
#lesson-sidebar .section.tasks A
{
	background-image:url(../media/icon-section-tasks.png)
}
#lesson-sidebar .section.results A
{
	background-image:url(../media/icon-section-results.png)
}
#lesson-sidebar .section.selected A
{
	background-position:50% 100% !important;
}
#lesson-sidebar .section.video.disabled A
{
	background-image:url(../media/icon-section-video-disabled.png)
}
#lesson-sidebar .section.theory.disabled A
{
	background-image:url(../media/icon-section-theory-disabled.png)
}
#lesson-sidebar .section.tasks.disabled A
{
	background-image:url(../media/icon-section-tasks-disabled.png)
}
#lesson-sidebar .section.results.disabled A
{
	background-image:url(../media/icon-section-results-disabled.png)
}


/*	contents
*/
#video
{
	width:640px;
	height:384px;
	margin:0 0 14px 30px;

	background-color:#262626;
}

.section.theory OBJECT
{
	/*	audio with controls (jwplayer) */
	height:24px;
	margin:-5px 0 25px 0;
}

.inline /* audio icon */
{
	display:inline-block;
	width:22px;
	height:20px;
	
	margin-right:5px;

	background:transparent url(../media/icon-audio.png) 0 0 no-repeat;
	
	vertical-align:text-bottom !important;
	cursor:pointer;
}
.inline.rtl
{
	/*	flip margin for right-to-left languages */
	margin-right:0;
	margin-left:5px;
}
.view.inline
{
	margin-left:12px;
	background-image:url(../media/icon-view.png);
}
.speech.inline
{
	background-image:url(../media/icon-speech.png);
}
.inline:hover
{
	background-position:0 100%;
}
.popover .audio.inline, #word-list .nl .audio.inline
{
	background-image:url(../media/icon-audio-white.png);
}
.audio.large.inline
{
	height:44px;
	width:50px;
	background-image:url(../media/icon-audio-large.png);
}

.section.results .result
{
	margin-bottom:44px;
}
.section.results .result > DIV:first-child
{
	width:105px;
	cursor:pointer;
}
.section.results .result.total
{
	font-weight:bold;
	padding-top:22px;
	margin-bottom:66px;
}
.section.results .progress-bar
{
	margin:2px 15px 0 10px;
	background-image:url(../media/bg-progress-bar.png);
}
.section.results .button.reset
{
	position:relative;
	float:right;
	padding-top:17px;
	margin-right:25px;
}
.section.results .button.reset A
{
	width:115px;
	height:24px;
	background-image:url(../media/button-opnieuw.png);
}


/*	task tabs, instructions
*/
#task-tabs
{
	position:relative;
	height:22px;
}
#task-tabs .line
{	
	position:absolute;
	left:1px;
	top:16px;
	right:0px;
	min-width:701px;
	height:1px;
	background-color:#35918a;
}
#task-tabs .label
{
	position:absolute;
	
	left:28px;
	top:-5px;
	width:55px;
	height:22px;
	padding:5px 0 0 10px;
	
	background:transparent url(../media/bg-task-tab-label-small.png) 0 0 no-repeat;
	
	/*color:#bfbfbf;*/
	color:#d0d0d0;
}
#task-tabs .label A
{
	color:#d0d0d0;
	text-decoration:none;
}
#task-tabs .label.open A
{
	color:#7F7F7F;
}
#task-tabs .label.done A
{
	color:#7f7f7f;
	background:transparent url(../media/icon-section-done.png) 0 2px no-repeat;
	padding-left:17px;
}
#task-tabs .label.done A:hover, #task-tabs .label.open A:hover
{
	color:black;
}
#task-tabs .label.selected A
{
	color:black !important;
	font-weight:bold;
}
#tasks .task-tab
{
	padding-top:22px;
}

.instructions
{
	display:block;
	float:left;
	
	position:relative;
	min-height:22px;
	width:95%;
	
	margin:-5px 0 18px 0;
	padding:4px 10px 3px 10px;
	
	border:1px solid #D59AB1;
	background:transparent url(../media/bg-instructions.png) repeat;
}
.instructions SPAN
{
	float:left;
}
#tasks .instructions
{
	margin-bottom:40px;
}
#tasks .instructions + P
{
	/*	for tasks with intro paragraph	*/
	float:left;
	width:100%;
	margin-top:-22px !important;
}
.instructions .button
{
	float:right;
	margin-left:8px;
	margin-top:-1px;
	border:0;

	/*background-image:url() !important;*/
	padding-bottom:0 !important;
}
#lesson-sections .theory .instructions .button
{
	/**display:none;**/
}
.instructions A
{
	width:22px;
	height:22px;
	background-image:url(../media/button-instructions.png);
}


/*	tasks
*/
.task
{
	position:relative;
	float:left;
	
	margin:0 30px 22px 0;
/*
	margin-right:30px;
	margin-bottom:22px;
*/
	
	min-width:260px;
	max-width:660px;
	
}
.task-body, .task-footer
{
	position:relative;
}
.task-body .content
{
	/*min-height:110px;*/ /* 5 lines */
	font-weight:bold;
	max-width:680px;
}
.task .bg
{
	position:absolute;
	top:0px;
	bottom:0px;
	width:50%;
	background-repeat:no-repeat;
	
	z-index:0;
}
.task-body .bg
{
	top:-11px;
}
.task .bg.left
{
	left:0px;
	background-position:0 0;
}
.task .bg.right
{
	right:0px;
	background-position:100% 0;
}
.task-body .bg.left
{
	background-image:url(../media/bg-task-left.png);
	/*background-image:url(../media/bg-task-left-dev.png);*/
}
.task-body .bg.right
{
	background-image:url(../media/bg-task-right.png);
	/*background-image:url(../media/bg-task-right-dev.png);*/
}
.task-body .bg.left .type
{
	position:absolute;
	left:4px;
	top:4px;
}
.task-body .content
{
	/*position:relative;*/
	padding:0px 35px;
	z-index:1;
}
.task-body .result
{
	position:absolute;
	right:6px;
	top:-6px;
	width:28px;
	height:26px;
	background:transparent url(../media/icon-task-completed.png) 28px 0 no-repeat;
	/*background-image:url(); !* removed for now *!*/
}
.task-body .result.success
{
	background-position:0 0;
}
.task-body .result.fail
{
	background-position:0 100%;
}
.task-footer
{
	/*height:22px;*/
}
.task-footer .bg.left
{	
	background-image:url(../media/bg-task-footer-left.png)
}
.task-footer .bg.right
{
	background-image:url(../media/bg-task-footer-right.png)
}


/*	multi-choice
*/
.task .question
{
	position:relative;
	float:left;
	margin-right:30px;
	
	text-align:center;
	white-space:nowrap;
}
.task .mc.images .question
{
	margin-right:0;
	float:none;
}
.task .mc.content .question IMG
{
	width:160px;
	height:160px;
	margin:19px auto;
	
	vertical-align:middle;
}
.task .options
{
	position:relative;
	float:left;
	padding:22px 0;
	/*max-width:80%;*/
}
.task .mc.images .options
{
	margin-top:22px;
	padding:0;
	/*max-width:100%;*/
}
.task .mc .option
{
	display:block;
	cursor:pointer;
	min-height:22px;
	/*white-space:nowrap;*/
}
.task .mc .option.multiline
{
	padding-left:28px;
}
.task .mc .option.multiline .check
{
	margin-left:-28px;
}


.task .mc.images .option
{
	float:left;
	position:relative;
	text-align:center;
	
	width:140px;
	min-height:154px;
	/*height:176px;*/
}
.task .mc.images .option IMG
{
	float:left;
}
.task .mc .check, #profile-form .check
{
	float:left;
	width:22px;
	height:22px;
	margin:-1px 6px 0 0;

	background:transparent url(../media/checkbox.png) 0 0 no-repeat;
}
.task .mc .check INPUT, #profile-form .check INPUT
{
	visibility:hidden;
}
.task .mc .check.checked, #profile-form .check.checked
{
	background-position:0 100%;
}
.task .mc .check.correct
{
	background-image:url(../media/checkbox-correct.png);
}
.task .mc .check.fail
{
	background-image:url(../media/checkbox-fail.png) !important;
}
.task .mc.images .check
{
	position:absolute;
	right:0px;
	top:0px;
	margin:0;
	background-image:url(../media/checkbox-image.png);
}
.task .mc.images .check.correct
{
	background-image:url(../media/checkbox-image-correct.png);
}


/*	drag-drop
*/
.task-body .content.dd
{
	padding:0 50px;
}
.task-body .content.dd .intro
{
	display:block;
	position:relative;
	font-weight:normal;
}
.task-body .content.dd .intro.centered
{
	text-align:center;
}
.task .drags, .task .drops
{
	position:relative;
	width:100%;
	/*min-height:26px;*/
}
.task .drops.four-column
{
	width:115%;
	margin-left:-29px;
}

.task .drags
{
	padding-top:19px;
	/*padding-bottom:18px;*/
	/*margin-bottom:px;*/
	z-index:10;
	height: 44px;
}

.task dd.images .drops
{
	padding-top:22px;
	min-height:157px;
	z-index:0;
}
.task .drag
{
	position:relative;
	float:left;
	background-color:#d9d9d9;
	padding:2px 8px 1px 8px;
	margin-right:25px;
	margin-bottom:19px;	
	
	cursor:pointer;
}
.task .drag IMG
{
	width:140px;
	height:140px;
	float:left;
}
.task .drag .audio.inline
{
	margin-bottom:2px;
}
.task .drag.dropped .audio.inline
{
	margin-bottom:0 !important;
}
.task .drag.correct .audio.inline
{
	background-image:url(../media/icon-audio-correct.png);
}
.task .drag.incorrect .audio.inline
{
	background-image:url(../media/icon-audio-incorrect.png);
}
.task .drag.dropped
{
	display:inline;
	line-height:22px;
	margin:0 5px;
	float:none;
	
	text-decoration:line-through;
}
.task .drag.dropped.image
{
	position:absolute !important;
	left:0;
	top:0;
	margin:0;
}
.task .drag.image.correct IMG 
{
	border:4px solid #32a129 !important;
	width:132px !important;
	height:132px !important;
}
.task .drag.correct, .correct
{
	color:#32a129;
	text-decoration:none;
	background-image:none;
}
em.correct
{
	font-weight:normal;
}
.task .drop IMG.correct
{
	left:auto !important;
	right:0;
	
	border:4px solid #32a129 !important;
	width:66px !important;
	height:66px !important;
}
.task .drop-zone
{
	letter-spacing:2px;
}
.task .dd.images .drop
{
	position:relative;
	float:left;

	padding-top:153px;
	margin-bottom:-4px;
	width:140px;
	min-height:22px;

	border:4px solid transparent;
	background:transparent url(../media/bg-drop.png) 0 0 no-repeat;
	text-align:center;
}
.task .dd.images .drop IMG
{
	position:absolute;
	left:0;
	top:0;
	width:140px;
	height:140px;
}
.task .dd.images .drop.over
{
	background-color:white;
	border-color:white;
	
	background-color:#bebebe;
	border-color:#bebebe;
}
.task .dd.text .drops
{
	position:relative;
	padding-top:14px;
	padding-bottom:11px;

	z-index:0;
	line-height:44px;
}
.task .dd.text .drop.over
{
	color:#bebebe;
}


/*	input
*/
.task .in.content
{
	position:relative;
	padding:11px 50px;
	
	line-height:44px;
}
.task .in.content INPUT, #profile-form .in
{
	border:1px solid #d9d9d9;
	padding:2px;
	margin:0 3px;
	width:75px;
	
	font-family:Helvetica,Arial,sans-serif;
	font-size:18px;
}
.task .in.content .audio.inline
{
	margin:0 -4px 0 4px;
}
.task .in.content em.correct
{
	font-weight:normal;
	padding:0 4px;
}


/*	record
*/
.task .rc.content
{
	position:relative;
	padding:0 50px;
}
.task .rc.content .record
{
	display:block;
	min-height:44px;
}
.task .rc.content .record:first-child
{	
	padding-top:22px;
}
.task .rc.content .intro
{
	display:block;
	font-weight:normal;
	margin-bottom:22px;
}
.rec
{
	position:relative;
	float:right;
	margin:-2px 0 0 20px;
	
	width:115px;
	height:24px;
	background:transparent url(../media/bg-recorder.png) no-repeat;
}
.rec .activity
{
	float:left;
	width:30px;
	height:24px;
}
.rec .button
{
	float:left;
	margin-top:2px;
	
	width:22px;
	height:22px;
}
.rec .timer
{
	float:left;
	width:41px;
	
	font-size:16px;
	font-weight:normal;
	color:black;
	padding-top:2px;
	text-align:center;
}
.rec .timer.disabled
{
	color:#969696;
}
.rec .button A
{
	width:22px;
	height:22px;
}
.rec .button.start A
{
	background-image:url(../media/button-record.png);
}
.rec .button.stop A
{
	background-image:url(../media/button-stop.png) !important;
}
.rec .button.play A
{
	background-image:url(../media/button-play.png);
}
.rec .button.play.disabled A
{
	background-image:url(../media/button-play-disabled.png);
}


/*	content layout
*/
.strong
{
	font-weight: bold;
}
.italic
{
	font-style: italic;
}
HR
{
	clear:both;
	border:1px solid black;
	border-width: 1px 0 0 0;
	margin:22px 0;
}


#lesson TABLE
{
	padding: 0;
	border-spacing: 0;
	width:100%;
	clear:both;
	
	margin-bottom:22px;
}
#lesson TD
{
	padding:0 4px 0 0;
	margin:0
}


.illustration
{
	border:1px dotted black;
	padding:21px;
	margin-bottom:22px;
}

.extra
{
	border:1px solid black;
	padding:21px;
	margin-bottom:22px;
}



.section.theory IMG.alphabet
{
border: none;
position: relative;
top: 8px;
margin: 0px;

	
}

.section.theory IMG
{
	/*margin-top:2px;*/
	margin:2px 0 12px 0;

	border:1px solid #0078c8;
}

.columns
{
	/*background-color:rgba(250,0,250,.1);*/
	clear:both;
	margin-bottom:22px;
}
.columns .col
{
	float:left;
}
/*
.columns IMG
{
	margin-bottom:12px;
}
*/
.columns .col:first-child
{
	/*background-color:magenta;*/
	width:185px;
	min-height:1px; /* force horizontal space for empty divs */
	/*margin-right:25px;*/
}

.block.left {
	float:left;
	padding-right:75px;
	width: 150px;
}

.middle {
	 float:left;
	 padding-right:75px;
	 width:150px;
}

.block.right {
	float: left;
	width: 150px;
}

.farright {
	width: 150px;
	padding-left: 40px;	
}

.lesspadding {
	float: left;
	width: 150px;
	padding-right:15px;
}

.lessonContainer {
	float:left;
	margin-bottom: 30px;
}

.one {
	float: left;
	padding: 15px 75px 0 0;
	
}

.two {
	float :left;
	
}

.illLeft {
	padding-top: 30px;
	padding-right: 90px;
	
}

.illMiddle {
	padding-top: 30px;
}

.illRight {
	float: left;
}

.left2 {
	float:left;
	padding-right:20px;
	width:200px;
}

.middle2 {
	float:left;
	width: 100px;
}

.right2 {
	float:left;
	width: 290px;	
}