* { margin:0; padding:0; }
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6
{
	margin:0;
	padding:0;
	-webkit-text-size-adjust:none; /* This stops the iPhone from automatically changing the size of the text when you flip the phone */
}
html
{
    width:100%;
    height:100%;
}
body
{
   font-family: Monda, sans-serif; font-size: 14px; line-height:16px;
   overflow: hidden !important;
   background-color:#cccccc;
   width:100%;
   height:100%;
}
#container 
{ 
    position:relative; height: 100%; width:100%; margin:0 auto; background-color: #ffffff;
    display:block; clear:both;
    box-shadow: 5px 5px 5px #888888;
}
#menuContainer 
{ 
   position: absolute;
   left:-200px;
   top:0px;
   width: 200px;
   height: 100%;
   overflow-x: hidden !important;
   overflow-y: hidden !important;
   display: none;	
}
#bodyContainer 
{ 
	position:absolute; 
	width:100%;
	left:0px; 
	top:0px;
	height:100%;
}
#hidden1 
{ 
   position: absolute;
   left:0px;
   top:0px;
   width: 30px;
   height: 30px;
   /*background-color:#ccccff;*/
}
#hidden2 
{ 
   position: absolute;
   left:0px;
   top:30px;
   width: 30px;
   height: 30px;
   /*background-color:#ffcccc;*/
}
#hidden3 
{ 
   position: absolute;
   left:30px;
   top:30px;
   width: 30px;
   height: 30px;
   /*background-color:#ccffcc;*/
}
/* -------------------------------------------------------
*  waitContainer: loading stuff
*  -------------------------------------------------------- */
#waitContainer 
{ 
	position:absolute; left:0px; bottom:1px; width:100%; height:48px; 
}	
#wait 
{ 
	background-image: url('loader/waittrans.gif');
	width:48px; height: 48px;
	margin-left: auto;
    margin-right : auto;
}
/* -------------------------------------------------------
*  container for to small res
*  -------------------------------------------------------- */
#smallRes 
{ 
    position:absolute; height: 100%; width:100%; background-color: #cccccc;
    display:none;
}
#smallRes .warning
{
    text-align:center; margin:50px 10px 0px 10px; color: #ffffff; font-weight:bold;
}
/* -------------------------------------------------------
*  container for starting course
*  -------------------------------------------------------- */
#startContainer 
{ 
	position:absolute; left:0px; top:0px; width:100%; height:100%; 
	visibility:hidden;
}	
#startContainer .logo
{
    position:absolute; left:20%; top:20%; width: 215px; height: 215px; margin-left:-107px; margin-top:-107px; background:url("adslogo.png");
}
#startContainer .row1
{
    position:absolute; left:0px; top:0px; height: 20%; right:0px;
}
#startContainer .row2
{
    position:absolute; left:0px; top:20%; margin-top:4px; right:0px; bottom:0px;
}
#startContainer .row1 .col1
{
    position:absolute; left:0px; top:0px; bottom:0px; width:20%; background-color:#ffffff;
}
#startContainer .row1 .col2
{
    position:absolute; left:20%; top:0px; right:0px; bottom:0px; background-color:#7bc142;
}
#startContainer .row2 .col1
{
    position:absolute; left:0px; top:0px; bottom:0px; width:20%; background-color:#00a7bd;
}
#startContainer .row2 .col1 .copyright
{
    position:absolute; left:5px; bottom:10px; right:10px; width:100%; text-align:center; font-size:100%; font-weight:bold; color:#ffffff;
}
#startContainer .row2 .col2
{
    position:absolute; left:20%; top:0px; right:0px; bottom:0px; background-color:#06ab4d;
}
#startContainer .row2 .col2 .title1
{
    position:absolute; left:110px; top:20%; font-size: 3.0em; font-weight:bold; color:#ffffff; text-align:left;line-height:1.8em;
}
#startContainer .row2 .col2 .logosbcmstoof 
{
    position:absolute; right:0px; bottom:0px; height:93px; width:442px; background-image:url("sbcmstooflogo.png");
}
#startContainer .row2 .col2 .logosbcm 
{
    position:absolute; right:0px; bottom:0px; height:93px; width:259px; background-image:url("sbcmlogo.png");
}
/* -------------------------------------------------------
*  header and footer
*  -------------------------------------------------------- */
#headerContainer 
{ 
    position:absolute; left:0px; top:0px; right:0px; height: 60px;
    background-color:#96b633; 
    color:#ffffff;
    display:none;
}
#headerContainer #info
{ 
    position:absolute; left:30px; top:0px; right:0px; height: 16px; width:300px;
    background-color:#ffffcc;
    display:none;
    font-family:Courier New; font-size:10px;
    color:#0000cc;
}
#headerContainer #bottom
{ 
    position:absolute; left:0px; bottom:0px; right:0px; height: 6px;
    background-color:#9b2c98;
}
#headerContainer #pageMarkers
{ 
    position:absolute; left:7%; bottom:0px; height: 12px;
    list-style:none;
    display:none;
}
#headerContainer #pageMarkers .pageMarker
{
    position:relative; 
    width:12px; height:12px;
    float:left;
    margin-right:12px;
    background: transparent url("ads.nav.png") 0px -556px no-repeat;
}
#headerContainer #pageMarkers .pageMarker.completed
{
    background: transparent url("ads.nav.png") -26px -556px no-repeat;
}
#headerContainer #pageMarkers .pageMarker.current
{
    background: transparent url("ads.nav.png") -13px -556px no-repeat;
}
#headerContainer #title { position: absolute; left: 7%; top: 16px; width: auto; text-align: left; font-size: 1.6em; font-weight: bold; }
#headerContainer #modtitle { position:absolute; right:7%; top:16px; width:auto; text-align:left; font-size: 1.2em; font-weight:bold; }
#headerContainer #btnExit
{ 
    position:absolute; right:0px; top:0px; width:30px; height:30px;
    background: url("ads.nav.png") -154px -97px no-repeat;
    display:none;
}
#headerContainer #btnExit:hover
{ 
    background: url("ads.nav.png") -185px -97px no-repeat;
}
#footerContainer { position:absolute; left:0px; bottom:0px; right:0px; height:50px; background-color:#96b633; color:#ffffff; display:none; }
#footerContainer #navLeft
{ 
    position:absolute; left:4%; bottom:2px; height:45px; display:none;
} 
#footerContainer #navLeft #btnAudio.vol100
{ 
    position:absolute; left:0px; width:45px; height:45px; background: url("ads.nav.png") 0px -510px no-repeat;
}
#footerContainer #navLeft #btnAudio.vol100:hover
{ 
    position:absolute; left:0px; width:45px; height:45px; background: url("ads.nav.png") -46px -510px no-repeat;
}
#footerContainer #navLeft #btnAudio.vol-50
{ 
    position:absolute; left:0px; width:45px; height:45px; background: url("ads.nav.png") 0px -569px no-repeat;
}
#footerContainer #navLeft #btnAudio.vol-50:hover
{ 
    position:absolute; left:0px; width:45px; height:45px; background: url("ads.nav.png") -46px -569px no-repeat;
}
#footerContainer #navLeft #btnAudio.vol50
{ 
    position:absolute; left:0px; width:45px; height:45px; background: url("ads.nav.png") -92px -569px no-repeat;
}
#footerContainer #navLeft #btnAudio.vol50:hover
{ 
    position:absolute; left:0px; width:45px; height:45px; background: url("ads.nav.png") -138px -569px no-repeat;
}
#footerContainer #navLeft #btnAudio.vol0
{ 
    position:absolute; left:0px; width:45px; height:45px; background: url("ads.nav.png") -92px -510px no-repeat;
}
#footerContainer #navLeft #btnAudio.vol0:hover
{ 
    position:absolute; left:0px; width:45px; height:45px; background: url("ads.nav.png") -138px -510px no-repeat;
}
#footerContainer #title
{ 
    display:none; position:absolute; left:10%; top:14px; width:auto; text-align:left; font-size: 1.6em; font-weight:bold;
}
#footerContainer #navRight
{ 
    position:absolute; right:40px; bottom:0px; height:65px; display:none;
} 
#footerContainer #navRight #btnAudio
{ 
    position:absolute; right:420px; width:77px; height:65px; background: url("ads.nav.png") 0px -260px no-repeat;
}
#footerContainer #navRight #btnAudio.active
{ 
    background: url("ads.nav.png") -154px -260px no-repeat;
}
#footerContainer #navRight #btnAudio.active:hover
{ 
    background: url("ads.nav.png") -77px -260px no-repeat;
}
#footerContainer #navRight #btnMenu
{ 
    position:absolute;right:320px; width:77px; height:65px; background: url("ads.menu.anim.png") 0px 0px no-repeat;
}
#footerContainer #navRight #btnNext
{ 
    position:absolute;right:0px; width:77px; height:65px; background: url("ads.next.anim.png") 0px 0px no-repeat;
}
#footerContainer #navRight #btnRepeat
{ 
    position:absolute; right:91px; width:77px; height:65px; background: url("ads.nav.png") 0px -260px no-repeat;
}
#footerContainer #navRight #btnRepeat.active
{ 
    background: url("ads.nav.png") -154px -260px no-repeat;
}
#footerContainer #navRight #btnRepeat.active:hover
{ 
    background: url("ads.nav.png") -77px -260px no-repeat;
}
#footerContainer #navRight #btnPrev
{ 
    position:absolute; right:182px; width:77px; height:65px; background: url("ads.nav.png") 0px -326px no-repeat;
}
#footerContainer #navRight #btnPrev.active
{ 
    background: url("ads.nav.png") -154px -326px no-repeat;
}
#footerContainer #navRight #btnPrev.active:hover
{ 
    background: url("ads.nav.png") -77px -326px no-repeat;
}
#footerContainer #colofon
{
    position:absolute; left:40px; bottom:20px; display:none;
}
.hidden { display:none; }
/* -------------------------------------------------------
*  volume container met slider
*  -------------------------------------------------------- */
#volumeContainer 
{ 
	position:absolute; left:0px; bottom:0px; width:100%; height:100%; 
	background-color:transparent;
	display:none;
}	
#volumeSlider
{
	position:absolute; left:4%; bottom: 50px;margin-left:17px; width:10px; height:100px;
	border-color:#068439;
}
#volumeSlider .ui-slider-handle { width: 20px; height: 20px; left:-7px; border-radius:6px; border-width:2px;}
#volumeSlider .ui-slider-handle.ui-state-default { background:#068439; border-color:#068439;}
#volumeSlider .ui-slider-handle.ui-state-hover { background:#068439; border-color:#068439; }
#volumeSlider .ui-slider-handle.ui-state-focus { background:#068439; border-color:#00828e; }
#volumeSlider .ui-slider-range { background:#96b633; }
#audioInfoContainer 
{ 
	position:absolute; left:0px; top:52%; width:100%; height:50px; 
	margin-top:-20px;
	text-align:center;
	font-size:3em;
	font-weight:bold;
	color:#267278;
	display:none;
}	

/* -------------------------------------------------------
*  main menu
*  -------------------------------------------------------- */
#mainMenuContainer 
{ 
    position: absolute;
	/*overflow: hidden;*/
	left: 0px;
	top: 60px;
	right:0px;
	bottom:50px;
	display:none;
}
#mainMenuContainer .mitem
{
    position:absolute;
    border-radius:20px; 
    background-color:#00afef; 
    box-shadow: 3px 3px 5px #888888;
}
#mainMenuContainer .mitem.eight 
{
    width:20%;
    height:45%;
}
#mainMenuContainer .mitem.nine 
{
    width:20%;
    height:43%;
}
#mainMenuContainer .mitem.row0 
{
    top:2%;  
    left:20%;
    width:60%;
    height:94%;  
}
#mainMenuContainer .mitem.row1 
{
    top:2%;
}
#mainMenuContainer .mitem.row2 
{
    top:50%;
}
#mainMenuContainer .mitem.row2.nine 
{
    top:49%;
}
#mainMenuContainer .mitem.row3 
{
    top:93.5%;
    width:30%;
    margin-left:-15%;
    height:5%;
    background-color:#7bc142;
}
#mainMenuContainer .mitem.col1 
{
    left:5.5%;
}
#mainMenuContainer .mitem.row3.col1 
{
    left:50%;
}
#mainMenuContainer .mitem.col2 
{
    left:28.5%;
}
#mainMenuContainer .mitem.col3 
{
    left:51.5%;
}
#mainMenuContainer .mitem.col4 
{
    left:74.5%;
}
#mainMenuContainer .mitem .titleBkg
{
    position:relative;
    height:20%;
    background-color:#7bc142;
    border-radius: 20px 20px 0px 0px;
}
#mainMenuContainer .mitem.active .titleBkg.hover
{
    background-color:#06ab4d; 
}
#mainMenuContainer .mitem .titleBkg .title
{
    position:absolute;
    bottom:10px;
    width:100%;
    text-align:center;
}
#mainMenuContainer .mitem.row0 .titleBkg .title
{
    position:absolute;
    bottom:0.5em;
    width:100%;
    text-align:center;
    font-size: 3em;
}
#mainMenuContainer .mitem .titleBkg .title h2
{
    font-size:1.25em;
    line-height: 0.9em;
    color:#ffffff;
    font-weight:bold;
}
#mainMenuContainer .mitem.row3 .titleBkg
{
    display:none;
}
#mainMenuContainer.noicons .mitem .mItemChildren
{
    margin: 4% 3% 0% 3%;
    list-style:none;
    text-align:center;
    font-size:1.05em;
}
#mainMenuContainer.noicons .mitem.row0 .mItemChildren
{
   margin: 1px 2% 1% 2%;
}
#mainMenuContainer.noicons .mitem.row3 .mItemChildren
{
   margin: 1% 2% 1% 2%;
}
#mainMenuContainer.noicons .mitem .mItemChildren .mItemChild
{
    padding: 4% 0% 4% 0%;
    color:#ffffff;
    border-bottom: 1px solid #0a8490;
}
#mainMenuContainer.noicons .mitem.row0 .mItemChildren .mItemChild
{
    /*padding: 3% 0% 3% 0%;*/
}
#mainMenuContainer.noicons .mitem.active .mItemChildren .mItemChild:hover /*, #mainMenuContainer .mitem .mItemChildren .mItemChild.tagged:hover*/
{
    background-color: #00a7bd;
}
#mainMenuContainer.noicons .mitem.row3:hover
{
    background-color:#06ab4d;
}
#mainMenuContainer.noicons .mitem.row3.active .mItemChildren .mItemChild:hover
{
    background-color: #06ab4d;
}
#mainMenuContainer.noicons .mitem.active .mItemChildren .mItemChild:last-child
{
    border-bottom: none;
}
#mainMenuContainer.noicons .mitem.row3 .mItemChildren .mItemChild
{
    padding:1% 2%;
    border-bottom: none;
}
#mainMenuContainer.noicons .mitem .mItemChildren .mItemChild.tagged
{
    background-color: #0a8490;
}
#mainMenuContainer .mitem .mItemChildren .mItemChild.started .itemTitle
{
    color:#333333;
}
#mainMenuContainer.noicons .mitem.row0 .mItemChildren .mItemChild .itemTitle
{
    font-size:220%;
    line-height: 100%;
}
#mainMenuContainer.noicons .mitem.row0.nChildren6 .mItemChildren .mItemChild .itemTitle
{
    font-size:170%;
}
#mainMenuContainer.noicons .mitem.row3 .mItemChildren .mItemChild .itemTitle
{
    font-size:100%;
    color:#ffffff;
    font-weight:bold;
}
#mainMenuContainer.noicons .mitem.row3 .mItemChildren .mItemChild.started .itemTitle
{
    color:#666666;
}
#mainMenuContainer.noicons .mitem .mItemChildren .mItemChild.completed .itemTitle
{
    padding-left: 20px;
    color:#2c6679;
    background-image: url(done.png);
    background-repeat: no-repeat;
    background-position: 0% 50%; 
}
#mainMenuContainer.noicons .mitem.row3 .mItemChildren .mItemChild.completed .itemTitle
{
    color:#2c6679;
    background-image: url(done.png);
    background-repeat: no-repeat;
    background-position: 0% 50%; 
}
#mainMenuContainer #tags
{
    position:absolute;
    top:-50px;
    right:4.5%;
    height:30px;
    width: 326px; /* MET dropdown button moet dit 350 zijn ! */
}
#mainMenuContainer #tags .icon
{
    background: url("ads.nav.png") -184px -510px no-repeat;
    width:30px; height:30px;
    position: absolute;
    left: -35px;
    top: 0px;
}
#mainMenuContainer #tags .clear
{
    background: #ffffff url("ads.nav.png") -215px -510px no-repeat;
    width:20px; height:20px;
    position: absolute;
    right: 10px;
    top: 5px;
}

/* nodig voor IE7 zonder jQuery combobox */
#mainMenuContainer #tags #tagsCombo
{
	margin-left:2%;
	margin-right:0px; /*2%;*/
	width:96%;
}
#mainMenuContainer #tags .ui-autocomplete-input 
{ 
	position:absolute;
	left:2%;
	top:2px;
	width:309px;
	height:24px;
	border:1px solid #cccccc;
	padding-top:0px;
	padding-bottom:0px;
}
#mainMenuContainer #tags .ui-button-icon-only
{
	position: absolute;
	right:2%;
	top:2px;
	width:24px;
	height:26px;
	overflow:hidden; /* IE */
	display:none;   /* GEEN DROPDOWN BUTTON ! */
}
#ui-id-1
{
    height:560px;/*71%;*/
    max-height:560px;
    width: 327px;
    overflow: auto;
    /*overflow-x: hidden !important;
    overflow-y:scroll !important;*/
    border: 1px solid #CCCCCC;
    background: #FFFFFF;
}
/* -------------------------------------------------------
*  main menu with icons
*  -------------------------------------------------------- */
#mainMenuContainer.icons .mitem.row0 { left:2%; width:96%; box-shadow:unset; background-color:transparent; border-radius:0; }
#mainMenuContainer.icons .mitem .titleBkg { display:none; background-color:transparent; border-radius:0; top:20px; height:1.5em; left:2%; }
#mainMenuContainer.icons .mitem.active .titleBkg.hover { background-color:transparent; }
#mainMenuContainer.icons .mitem.row0 .titleBkg .title { bottom:unset; text-align:left; font-size:1em; }
#mainMenuContainer.icons .mitem .titleBkg .title h2 { font-size:1em; line-height:1.1em; color:#333333; }
#mainMenuContainer.icons .mitem .mItemChildren { position:relative; left:2%; width:96%; top:40px; text-align:center; height:250px; }
#mainMenuContainer.icons .mitem .mItemChildren .mItemChild { position:relative; display:inline-block; width:200px; height:200px; margin:0; padding:0; background-color:transparent; background-size:cover; margin-right:20px; transition: all .2s ease-in-out; }
#mainMenuContainer.icons .mitem.nChildren6 .mItemChildren .mItemChild { width:180px; height:180px; margin-right:10px; }
#mainMenuContainer.icons .mitem .mItemChildren .mItemChild.active:hover { transform:scale(1.02); }
#mainMenuContainer.icons .mitem .mItemChildren .mItemChild .itemTitle { position:absolute; display:table; visibility:hidden; bottom:-41px; left:0; width:100%; background-color:#666666; height:40px; padding:0; }
#mainMenuContainer.icons .mitem .mItemChildren .mItemChild .itemTitle .title { display:table-cell; text-align:center; vertical-align:middle; color:#ffffff; }
#mainMenuContainer.icons .remark { display:none; text-align:center; color:#666666; font-size:1.2em; line-height:1.4em; }
#mainMenuContainer.icons .extra { display: none; width: 250px; height: 100px; position:absolute; left:12%; top:65%; background-color: transparent; background-size:contain; background-repeat:no-repeat; color: #810281; font-weight:bold; font-size:1.5em; line-height:1.6em; }
#mainMenuContainer.icons .puzzle { display:block; width:200px; height:200px; position:absolute; left:42%; top:60%; background-color:transparent; background-size:contain; }
#mainMenuContainer.icons .puzzle .puzzleItem { position:absolute; width:100%; height:100%; background-size:contain; }
#mainMenuContainer.icons .certificate { display:none; width:200px; height:111px; position:absolute; left:70%; top:67%; text-align:center; }
#mainMenuContainer.icons .certificate .button { width:200px; background-color:#810281; color:#ffffff; text-align:center; font-size:1.4em; padding:0.2em 0.5em 0.4em; font-weight:bold; line-height:1.4em; }
#mainMenuContainer.icons .certificate .button:hover { transform:scale(1.02); }
/* -------------------------------------------------------
*   PDF REPORT
*   Use the DejaVu Sans font for display and embedding in the PDF file.
*   The standard PDF fonts have no support for Unicode characters.
*  -------------------------------------------------------- */
@font-face { font-family: "DejaVu Sans"; src: url(font/DejaVu/DejaVuSans.ttf?v=1.1) format("truetype"); }
@font-face { font-family: "DejaVu Sans"; font-weight: 700; src: url(font/DejaVu/DejaVuSans-Bold.ttf?v=1.1) format("truetype"); }
@font-face { font-family: "DejaVu Sans"; font-style: italic; src: url(font/DejaVu/DejaVuSans-Oblique.ttf?v=1.1) format("truetype"); }
@font-face { font-family: "DejaVu Sans"; font-weight: 700; font-style: italic; src: url(font/DejaVu/DejaVuSans-BoldOblique.ttf?v=1.1) format("truetype"); }
#pdfreport { font-family:"DejaVu Sans"; position: absolute; width: 842px; top:2000px; height:1000px; }
#pdfreport div.content { position:absolute; left:30px; top:30px; right:30px; height:400px; background-color:#93b633; color:#ffffff; }
#pdfreport div.title { position:relative; margin-left:20px; margin-top:80px; text-align:left; font-weight:bold; font-size:40px; line-height:58px; }
#pdfreport div.text { position:relative; margin-left:60px; margin-top:60px; margin-right:20px; text-align:left; font-size:18px; line-height:36px; }
#pdfreport span.user { font-size:22px; }
#pdfreport div.puzzle { position:absolute; top:100px; right:20px; width:100px; height:100px; }
#pdfreport div.puzzle img { width:100%; height:100%; }
#pdfreport div.logo { position:absolute; width:187px; height:65px; top:500px; right:30px; }
/* -------------------------------------------------------
*   chapter results on score report
*  -------------------------------------------------------- */
#scoreReport { font-family:"DejaVu Sans"; position: absolute; width: 842px; top:2000px; height:1000px; }
#bodyContainer { background-color:#ffffff; } /* this way report is not visible on screen */
#scoreReport div.content { position:absolute; left:30px; top:30px; right:30px; height:400px; color:#333333; }
#scoreReport div.title { position:relative; margin-top:20px; text-align:left; }
#scoreReport div.title > p { font-weight:bold; font-size:14px; line-height:20px;}
#scoreReport div.title > p:first-child { font-size:18px; line-height:22px; }
#scoreReport div.pageSheet { position:relative; margin-top:30px; text-align:left; font-size:14px; line-height:20px; }
#scoreReport .chapterResult
{
    position:relative;
    margin-top:3px;
    width:400px;
    height:34px;
}
#scoreReport .chapterResult .bar
{
    position:relative;
    height:25px;
    width:400px;
    background-color:#eeeeee;
    border: 1px solid #999999 !important;
    border-radius: 5px;
    background-image: url("balk_result.png");
    background-size: cover;
}
#scoreReport .chapterResult .bar .ok
{
    position:relative;
    height:25px;
    width:0px;
    background-color:#7bc142;
}
#scoreReport .chapterResult .result
{
    position:relative;
    left:210px;
    margin-top:-24px;
}
#scoreReport .chapterResult .result.ar
{
    left:-210px;
}
#scoreReport .chapterResult .bar .dot
{
    position: absolute;
    height: 25px;
    width: 25px;
    left:0px;
    top:0px;
    background-image: url("bol_result.png");
}

/* -------------------------------------------------------
*   KENDO WINDOW
*  -------------------------------------------------------- */      
.k-window .k-window-titlebar .k-window-action { padding:0px; width:28px; height:28px; }
.k-window .k-header { background:#93b633; color: #ffffff; font-size: 14px; border-color:#93b633; border-radius:2px 2px 0 0; }
.k-window .k-window-titlebar .k-window-title { top: 0.3em; }
.k-window .k-window-titlebar .k-window-action:hover {
    background-image: none, -webkit-linear-gradient(right, #2c6679 0px, #2c6679 100%); /* For Safari 5.1 to 6.0 */
    background-image: none, -o-linear-gradient(right, #2c6679 0px, #2c6679 100%); /* For Opera 11.1 to 12.0 */
    background-image: none, linear-gradient(to right, #2c6679 0px, #2c6679 100%);
    border-color: #cccccc;
}
.k-window .k-icon.k-i-close { background-image:url("course.png"); background-position:0px -265px; margin:5px;}
.k-window .k-link:hover .k-i-close { background-image:url("course.png"); background-position: -17px -265px; }
.k-window .k-window-titlebar .k-window-title { top:0.3em; font-weight:bold; }
.k-window, .k-window .k-window-content { border-radius:4px; }
.k-button, .k-button.k-state-selected { background-color:#93b633; border-color:#93b633; color:#eeeeee; }
.k-button.k-state-hover, .k-button.k-state-active:hover, .k-button:hover { background-color:#93b633; border-color:#93b633; color:#ffffff; }
#askUserWindow { text-align:center; }
#askUserWindow input {border-color:#cccccc; font-size:1em; color:#666666; }
#askUserWindow input.wrong { border-color:#cc4b00; }
#askUserWindow div.buttons { margin-top:1.5em; }
#askUserWindow div.buttons .k-button.cancel{ margin-left:1em; }

/* course dependent colors */
.ui-widget-content { color:#87ad98; }	/* color of autocomplete field */
.ui-widget-content a { color: #87ad98; } /* color of combobox items */
select { border-color: #87ad98; } /* color of combobox border */
/* -------------------------------------------------------
*  content
*  -------------------------------------------------------- */
#contentContainer 
{ 
	position: absolute;
	overflow: hidden;
	left: 0px;
	top: 60px;
	right:0px;
	bottom:50px;
	display:none;
}
.contentContainer 
{ 
	position: absolute;
	left: 0px;
	top: 0px;
	right:0px;
	bottom:0px;
	height:100%;
	width:100%;
	display:none;
}
/* -------------------------------------------------------
* general classes
*  -------------------------------------------------------- */
.active
{ 
    cursor: pointer; cursor: hand;
}
.dimmed
{
    opacity:0.3;
}
/* -------------------------------------------------------
* custom font size for exit dialog
*  -------------------------------------------------------- */
.ui-dialog { font-size: 100%; }
.ui-dialog, .ui-dialog-title { font-size:90%; }
.ui-dialog, .ui-dialog-content { font-size:100%; }
.ui-dialog, .ui-button-text { font-size:90%; }
/* -------------------------------------------------------
*  media queries
*  for IE < 9 : no media queries so we take some default settings
*  see http://www.websitedimensions.com/
*  -------------------------------------------------------- */
#container { width:1010px; height:758px; }
@media only screen and (max-width: 1023px), only screen and (max-height: 599px)
{
    #container { display: none; }
    #smallRes { display:block; }
}
@media only screen and (min-width: 1024px) and (min-height: 600px)
{
    #container { display: block; }
    #smallRes { display:none; }
}
@media only screen and (min-width: 1024px) and (min-height: 600px) /* galaxy tab 7, kindle fire: 1024 x 600 : 1010 x 560 */
{
    #container { width:1010px; height:590px; }
    body { font-size: 12px; line-height:14px; }
    #mainMenuContainer.noicons .mitem .mItemChildren { margin-top:1%; }
	#mainMenuContainer.noicons .mitem .mItemChildren .mItemChild { padding: 3% 0% 3% 0%; }
    #mainMenuContainer.icons .mitem .mItemChildren .mItemChild { width:180px; height:180px; margin-right:5px; }
    #mainMenuContainer.icons .mitem.nChildren6 .mItemChildren .mItemChild { width:150px; height:150px; margin-right:5px; }
    #mainMenuContainer.icons .puzzle { top:63%; left:40%; width: 180px; height: 180px; }
    #mainMenuContainer.icons .extra { top:72%; }
}
@media only screen and (min-width: 1024px) and (min-height: 644px) /* ipad landscape: 1024 x 768 safari */
{
    #container { width:1010px; height:634px; }
    body { font-size: 12px; line-height:14px; }
    #mainMenuContainer.noicons .mitem .mItemChildren { margin-top:1%; }
	#mainMenuContainer.noicons .mitem .mItemChildren .mItemChild { padding: 3.5% 0% 3.5% 0%; }
    #mainMenuContainer.icons .mitem .mItemChildren .mItemChild { width:180px; height:180px; margin-right:5px; }
    #mainMenuContainer.icons .mitem.nChildren6 .mItemChildren .mItemChild { width:150px; height:150px; margin-right:5px; }
    #mainMenuContainer.icons .puzzle { left:40%; width: 180px; height: 180px; }
}
@media only screen and (min-width: 1024px) and (min-height: 672px) /* ipad landscape: 1024 x 768 chrome */
{
    #container { width:1010px; height:662px; }
    body { font-size: 12px; line-height:14px; }
    #mainMenuContainer.noicons .mitem .mItemChildren { margin-top:2%; }
	#mainMenuContainer.noicons .mitem .mItemChildren .mItemChild { padding: 3.5% 0% 3.5% 0%; }
    #mainMenuContainer.icons .mitem .mItemChildren .mItemChild { width:180px; height:180px; margin-right:5px; }
    #mainMenuContainer.icons .mitem.nChildren6 .mItemChildren .mItemChild { width:150px; height:150px; margin-right:5px; }
    #mainMenuContainer.icons .puzzle { left:40%; width: 180px; height: 180px; }
}
@media only screen and (min-width: 1024px) and (min-height: 768px) /* ipad landscape: 1024 x 768 : 1010 x 660 */
{
    #container { width:1010px; height:758px; }
    body { font-size: 14px; line-height:16px; }
    #mainMenuContainer.noicons .mitem .mItemChildren { margin-top:3%; }
	#mainMenuContainer.noicons .mitem .mItemChildren .mItemChild { padding: 4% 0% 4% 0%; }
    #mainMenuContainer.icons .mitem .mItemChildren .mItemChild { width:180px; height:180px; margin-right:5px; }
    #mainMenuContainer.icons .mitem.nChildren6 .mItemChildren .mItemChild { width:150px; height:150px; margin-right:5px; }
    #mainMenuContainer.icons .puzzle { left:40%; width: 180px; height: 180px;}
}
@media only screen and (min-width: 1280px) and (min-height: 644px) /* medion lifetab: 1280 x 648 */
{
    #container { width:1270px; height:638px; }
    body { font-size: 12px; line-height:14px; }
    #mainMenuContainer.noicons .mitem .mItemChildren { margin-top:1%; }
	#mainMenuContainer.noicons .mitem .mItemChildren .mItemChild { padding: 3% 0% 3% 0%; }
    #mainMenuContainer.icons .mitem .mItemChildren .mItemChild { width:200px; height:200px; margin-right:20px; }
    #mainMenuContainer.icons .mitem.nChildren6 .mItemChildren .mItemChild { width:180px; height:180px; margin-right:10px; }
    #mainMenuContainer.icons .puzzle { left:42%; width: 180px; height: 180px; }
}
@media only screen and (min-width: 1280px) and (min-height: 654px) /* medion lifetab: 1280 x 648 */
{
    #container { width: 1270px; height: 650px; }
    body { font-size: 12px; line-height: 14px; }
    #mainMenuContainer.noicons .mitem .mItemChildren { margin-top: 1%; }
    #mainMenuContainer.noicons .mitem .mItemChildren .mItemChild { padding: 3% 0% 3% 0%; }
    #mainMenuContainer.icons .mitem .mItemChildren .mItemChild { width: 200px; height: 200px; margin-right: 20px; }
    #mainMenuContainer.icons .mitem.nChildren6 .mItemChildren .mItemChild { width:180px; height:180px; margin-right:10px; }
    #mainMenuContainer.icons .puzzle { left:42%; width: 180px; height: 180px; } 
}
@media only screen and (min-width: 1280px) and (min-height: 752px) /* asus transformer: 1280 x 752 */
{
    #container { width:1270px; height:715px; }
    body { font-size: 12px; line-height:14px; }
    #mainMenuContainer.noicons .mitem .mItemChildren { margin-top:2%; }
	#mainMenuContainer.noicons .mitem .mItemChildren .mItemChild { padding: 3.5% 0% 3.5% 0%; }
    #mainMenuContainer.icons .mitem .mItemChildren .mItemChild { width:200px; height:200px; margin-right:20px; }
    #mainMenuContainer.icons .mitem.nChildren6 .mItemChildren .mItemChild { width:180px; height:180px; margin-right:10px; }
    #mainMenuContainer.icons .puzzle { left:41%; width: 200px; height: 200px; }
}
@media only screen and (min-width: 1280px) and (min-height: 768px) /* nexus, surface: 1280 x 768 : 1245 x 680*/
{
    #container { width:1270px; height:715px; }
    body { font-size: 12px; line-height:14px; }
    #mainMenuContainer.noicons .mitem .mItemChildren { margin-top:2%; }
	#mainMenuContainer.noicons .mitem .mItemChildren .mItemChild { padding: 3.5% 0% 3.5% 0%; }
    #mainMenuContainer.icons .mitem .mItemChildren .mItemChild { width:200px; height:200px; margin-right:20px; }
    #mainMenuContainer.icons .mitem.nChildren6 .mItemChildren .mItemChild { width:180px; height:180px; margin-right:10px; }
    #mainMenuContainer.icons .puzzle { left:41%; width: 200px; height: 200px; }
}
@media only screen and (min-width: 1280px) and (min-height: 800px) /* galaxy note, galaxy tab 8,9,10, sony tablet s, acer iconia: 1280 x 800 : 1245 x 680*/
{
    #container { width:1270px; height:790px; }
    body { font-size: 15px; line-height:17px; }
    #mainMenuContainer.noicons .mitem .mItemChildren { margin-top:3%; }
	#mainMenuContainer.noicons .mitem .mItemChildren .mItemChild { padding: 3.8% 0% 3.8% 0%; }
    #mainMenuContainer.icons .mitem .mItemChildren .mItemChild { width:200px; height:200px; margin-right:20px; }
    #mainMenuContainer.icons .mitem.nChildren6 .mItemChildren .mItemChild { width:180px; height:180px; margin-right:10px; }
    #mainMenuContainer.icons .puzzle { left:41%; width: 200px; height: 200px; }
}
@media only screen and (min-width: 1440px) and (min-height: 1024px) /* 1440 x 1024 : 1405 x 775*/
{
    #container { width:1430px; height:805px;}
    body { font-size: 15px; line-height:17px; }
}
@media only screen and (min-width: 1600px) and (min-height: 1050px) /* 1600 x 1050 : 1665 x 825 */
{
    #container { width:1590px; height:890px;}
    body { font-size: 15px; line-height:17px; }
}
@media only screen and (min-width: 1680px) and (min-height: 1050px) /* 1680 x 1080 : 1645 x 825 */
{
    #container { width:1670px; height:940px;}
    body { font-size: 15px; line-height:17px; }
}
@media only screen and (min-width: 1920px) and (min-height: 1024px) /* acer iconia, sony xperia: 1920 x 1080 : 1885 x 980 */
{
    #container { width:1670px; height:940px;}
    body { font-size: 15px; line-height:17px; }
}