/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
	font-family: Arial;
    font-size: 1em;
    line-height: 1.4;
}

body.viewer, body.exam {
	background-color: #efefef;
}

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

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

/* ==========================================================================
   Element styles
   ========================================================================== */



a {
	text-decoration: none;
	color: #009900;
}
	a:hover {
		text-decoration: underline;
	}

a.option {
	padding-right: 17px;
	background: url('../images/bullet-link.png') no-repeat right center;
	font-weight: bold;
}

p.small {
	font-size: 0.688em;
	color: #717171;
}

.panelBig p {
	font-size: 0.938em;
}

.panelBig p.bigger {
	font-weight: bold;
	font-size: 1em;
}

.panelBig h2 {
	font-size: 1.500em;
	color: #009900;
}

.panelBig h3 {
	color: #009900;
	font-size: 1.125em;
}

.panelBig {
	color: #6e6e6e;
}


/* Header headings */

header hgroup {
	text-align: right;
}

header hgroup h1,
header hgroup h2 {
	font-size:2.875em;
	font-weight: normal;
	color: #99CC00;
	line-height: 1em;
	text-shadow: 0px 1px #009744; /* @todo add IE fix */
}

body.viewer header hgroup h1 {
	font-size:0.875em;
	font-weight: normal;
	color: #009900;
	text-shadow: none;
}
	header hgroup h1 span {
		color: #9d9d9d;
	}

header hgroup {
	padding-top: 10px;
}

body.viewer header hgroup {
	padding-top: 0px;
}


/* Default Slide styles */


.viewer article.view .wrap h1 {
	margin-bottom: 0.5em;
	color: #009900;
}

.viewer article.view .wrap p {
	color: #4f4f4f;
    font-size: 0.875em;
}

.viewer article.view .row .wrap ul {
	color:black;
	font-size: 0.875em;
}

	.viewer article.view .row .wrap ul > li{
		margin-bottom: 0.2em;
	}

    .viewer article.view .row .image-with-title ul {
        color: white;
    }
/* Word styles */

.viewer.word article .wrap > h1{
	font-size: 1.5em;
	font-weight: bold;
	color: #009900;
	margin-bottom: 0.5em;
}

.viewer.word article .wrap > h2{
	font-size: 1.25em;
	font-weight: bold;
	color:#222222;
}

.viewer.word article .wrap > ul,
.viewer.word article .wrap > p {
	font-size: 0.875em;
	color: #3d3d3d;
	
}

.viewer.word article .wrap > ul {
	margin-bottom: 20px;
}
	.viewer.word article .wrap > ul li{
		margin-bottom: 15px;
		
	}

.viewer.word article > .wordsRow.sel {
	background: url('../images/word-sel-bg.png') repeat-x center top #ffdd27;
	border-bottom: 1px solid #7f5d00;
}

.viewer.word article > .wordsRow.sel .frame{
	background: url('../images/word-sel-arrow.png') no-repeat;
	background-position-y: 23px;
}



/* ==========================================================================
   Page Structure
   ========================================================================== */

/*
 * Global
 */

.logo {
	position: absolute;
	top:13px; left: 4px;
	z-index: 120;
}

body > header {
	background: url('../images/header-repeat.png') repeat-x;
}
body.viewer > header {
	position: absolute;
	top:0px; left:0px;
	width: 100%;
	background: url('../images/header-bg.png') repeat-x center top;
	z-index: 100;
}
	
	body > header .wrap {
		position: relative;
		margin: 0 auto;
		width:960px; height:119px;
		overflow: hidden;
	}
	
	body > header hgroup {
		position: absolute;
		top:13px; right:10px;
	}
	
    body > header nav.options {
        position: absolute;
        bottom: 20px;
        right:10px;
        z-index: 150;
    }
	
	body > header nav.tabs {
		position: absolute;
		bottom:0px; left:120px;
	}

/*
 * Viewer structure
 */
 	
.viewer.word header {
	position: fixed;
}
	
.viewer article, .exam article {
	position: absolute;
	top: 89px;
	width: 100%;
	z-index: 50;
	overflow: hidden;
}

.exam article {
    top: 100px;
}

	article .row, article .wordsRow {
		width: 100%;
	}
		article .frame {
			position: relative;
			width: 960px; 
			margin: 0 auto;
			overflow: visible;
		}
			article .row .wrap, article .wordsRow .wrap{
				padding: 55px 200px 0 20px;
			}
			
			article.view .frame {
				height: 607px;
			}
	
	.viewer.word article {
		overflow: visible;
		padding-top: 50px;
	}
		.viewer.word article .wordsRow{
			padding-top: 10px;
            background: #fcfefc;
		}
			.viewer.word article .wordsRow .wrap{
				padding: 15px 200px;
			}

section.controlls {
	position: absolute;
	top: 530px;
	width: 100%; height: 77px;
}
	section.controlls .wrap {
		position: relative;
		margin: 0 auto;
		width: 960px;
	}
	
.viewer.word section.controlls {
	position: fixed;
	top:618px;
}
	
section.index {
	position: absolute;
	top:-470px; left:-9px;
	width: 271px; height: 454px;
	overflow: hidden;
    z-index: 1;
}

/*
 * Default page
 */
 

article > header {
	float: left;
	position: relative;
	margin-top: -3px;
	width: 100%; height: 320px;
	background-color: silver;
	z-index: -20;
	text-align: center;
}
	article.splash > header {
		height: 437px;
	}

article > .wrap {
	position: relative;
	margin: 0 auto;
	width: 960px;
}

article.splash {
	padding-bottom: 50px;
}

article .panelBig {
	float: left;
	margin: 20px 0 0 10px;
	width: 620px;
	background-color: white;
}

.splash .panelSmall {
	position: absolute;
	top: 0;
	right: 7px;
}

.panelSmall {
	position: absolute;
	top:65px;
	right: 7px;
}

footer {
	float: left;
	clear: both;
}


/* ==========================================================================
   Specific Elements
   ========================================================================== */

/* panel small */

.panelSmall {
	width: 288px;
}	
	.panelSmall .cap {
		float: left;
		height: 21px; width: 100%;
		background: url('../images/panel-small-bg.png') no-repeat;
	}
	
	.panelSmall .cont {
		float: left;
		width: 100%;
		background: url('../images/panel-small-bg.png') no-repeat center bottom;
	}
	
	.panelSmall .wrap {
		padding: 0 23px 23px 23px;
	}

/* Icon header */

h2.iconHeader {
	color: #009900;
	padding-left: 55px;
	border-bottom: 1px solid #d7d7d7;
	padding-bottom: 20px;
}
	h2.iconHeader.small {
		font-size: 0.938em;
	}
	h2.iconHeader.medium {
		font-size: 1.125em;
		padding-top: 6px;
	}
	h2.iconHeader.key {
		background: url('../images/icon-key.png') no-repeat;
	}
	h2.iconHeader.book {
		background: url('../images/icon-book.png') no-repeat 10px 0;
	}

/* panel small form*/

.panelSmall form {
	float: left;
	width: 100%;
	padding: 20px 0 20px 0;
}

label {
	display: block;
	font-size: 0.875em;
	font-weight: bold;
	padding-bottom: 0.25em;
	color: #717171;
	width: 100%
}
	label.small {
		width: 100%;
		font-size: 0.750em;
	}

input[type="text"],
.panelSmall form input[type="password"],
.panelSmall form SELECT {
	display: block;
	border: 1px solid #999999;
	background: url('../images/form-text-bg.png') repeat-x;
	padding: 4px;
    margin-bottom: 1em;
	font-size: 0.875em;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.panelSmall form SELECT {
    border-radius: 0px;
}

.panelSmall form .submitWrapper {
	position: relative;
	float: left;
	width: 100%;
	border-top: 1px solid #d7d7d7;
	margin-top: 15px;
	padding-top: 15px;
}

.panelSmall form input[type="checkbox"] {
	float: left;
}

.panelSmall form .submitWrapper a {
	position: absolute;
	top:20px; right:0px;
	font-size: 0.813em;
	font-weight: bold;
	padding-right: 20px;
	background: url('../images/bullet-link.png') no-repeat right center;
}

/* Section panel */

.route ul {
	list-style: none;
	margin:0 0 0 -19px; padding: 0 0 10px 0;
	width: 280px;
	overflow: hidden;
}

	.route ul li {
		padding: 15px 20px 15px 65px;
	}
	
	.route ul li.sel {
		background: url('../images/word-sel-bg.png') repeat-x center top;
		border-bottom: 1px solid #8b6a1b;
	}
	
	.route ul li p {
		font-size: 0.813em;
		margin:0;
	}
	.route ul li p.big {
		margin-top: 5px;
		font-size: 0.938em;
		font-weight: bold;
	}
	
	.route ul li h3 {
		font-size: 1.500em;
		margin-bottom: 0.5em;
	}
	
	.route ul li p,
	.route ul li h3,
	.route ul li a {
		color: #aaaaaa;
	}
	
	.route ul li.done p {
		color:#727272;
	}
	
	.route ul li.done h3, .route ul li.done h3 A {
		color: #009900;
        text-decoration: none;
	}
	
	.route ul li.sel p,
	.route ul li.sel h3, .route ul li.sel h3 A {
		color: black
	}
	
	.route ul li .options {
		float: right;
		height: 35px;
	}
	
	.route ul li .options.doneIcon {
        width: 32px;
		background: url('../images/icon-done-big.png') no-repeat center center;
	}

    .route ul li .button{
		display: block;
		width: 38px; height: 39px;
		background: url(../images/route-start-sprite.png) no-repeat left top;
		cursor: pointer;
	}
		.route ul li .button.disabled {
			background-position: left bottom;
		}
		.route ul li .button:hover{
			text-decoration: none;
		}
		
	.route .progress {
		position: absolute;
		top:87px; left:22px;
		width: 32px; height: 292px;
		background: url('../images/route-bg-sprite.png') no-repeat;
		z-index: 200;
	}
		.route .progress.pos1 {
			background-position: -32px 0px;
		}
		.route .progress.pos2 {
			background-position: -64px 0px;
		}
		.route .progress.pos3 {
			background-position: -96px 0px;
		}

/* viewer tabs */

body > header nav.tabs li{
	float: left;
	position: relative;
	overflow: visible;
	height: 23px; width: 90px;
	margin: 3px 2px 0 0;
	background-color: #99CC00;
	font-size:0.813em;
	font-weight: bold;
	text-align: center;
	z-index: 110;
}
	body > header nav.tabs li.sel{
		height: 30px; width: 98px;
		margin:0 2px 0 0;
		background: none;
		font-size: 0.875em; 
		z-index: 100;
	}
	
	body > header nav.tabs li a{
		display: block;
		color: white;
		position: relative;
		z-index: 100;
		width: 100%;
		padding-top: 3px;
	}
		body > header nav.tabs li a:hover{
			text-decoration: none;	
		}
		body > header nav.tabs li.sel a{
			padding-top: 4px;
			color: #009900;
		}
		
	body > header nav.tabs li .bg {
		position: absolute;
		width: 3000px; height: 30px;
		top:0px; left: -1448px;
		display: none;
		background: url('../images/header-tab-bg.png') no-repeat;
		z-index:90;
	}	
		body > header nav.tabs li.sel .bg {
			display: block;
		}

/* viewer page options */

body > header nav.options li {
	float: left;
	margin-left: 40px;
	font-size: 0.813em;
	color: #009744;
}
	body > header nav.options li span{
		color: #9d9d9d;
	}
	body > header nav.options li .option {
		padding-left: 10px;
	}

/* viewer Controlls */

section.controlls {
	background: url('../images/controlls-shadow.png') no-repeat center bottom;
}

.exam article section.controlls,
.viewer.word article section.controlls {
	background: none;
}



/* viewer Controll buttons */

section.controlls .button {
	position: absolute;
	top:8px;
}

	section.controlls .button.close{
		right:10px;
	}
	section.controlls .button.index{
		left: 10px;
	}
	section.controlls .button.index.sel {
		background-position: center bottom;
	}


/* viewer Prev/Next buttons */


section.controlls .controll {
	position: absolute;
	width: 48px; height: 48px;
	top: 0px;
}
	section.controlls .controll:hover {
		text-decoration: none;
	}
	section.controlls .controll.prev{
		left: 220px;
		background: url('../images/controlls-button-prev.png') no-repeat;
	}
	
	section.controlls .controll.next{
		right: 220px;
		background: url('../images/controlls-button-next.png') no-repeat;
	}

/* viewer Slider strip */

section.controlls .slider {
	position: absolute;
	left: 286px; top: 8px;
	width: 386px; height: 30px;
}
	section.controlls .slider .bg {
		position: absolute;
		top:0px;
		width: 386px; height: 30px;
		background: url('../images/controlls-slider-bg.png') no-repeat;
		z-index: 90;
	}
		
	
	section.controlls .slider .progress {
		position: absolute;
		top:0px;
		  height: 30px;
		background: url('../images/controlls-slider-progress.png') no-repeat;
		overflow: hidden;
		z-index: 100;
		
		/*width: 386px; = max*/ width: 100px; /* @todo dynamisch via JS */
	}
	
	section.controlls .slider .actions {
		position: absolute;
		z-index: 110;
	}
	
	section.controlls .slider .bg div, 
	section.controlls .slider .progress div,
	section.controlls .slider .actions a {
		position: absolute;
		top:0px;
		width: 30px; height: 30px;
	}
	
	section.controlls .slider .bg div {
		background: url('../images/controlls-slider-bg-dot.png') no-repeat center;
	}
	section.controlls .slider .progress div {
		background: url('../images/controlls-slider-progress-dot.png') no-repeat center;
	}
	
	section.controlls .slider .star {
		position: absolute;
		background: url('../images/controlls-slider-progress-star2.png') no-repeat;
		width: 26px; height: 26px;
		z-index: 105;
        top: 1px;
		left: 90px; /* @todo dynamisch via JS */
	}


/* viewer Questions strip */

section.controlls .questions {
	text-align: center;
}

section.controlls .questions ul {
	list-style: none;
	display: inline-block;
	padding: 0;
}
	section.controlls .questions ul li {
		float: left;
	}
		section.controlls .questions ul li a,
		section.controlls .questions ul li div {
			display: block;
			width: 34px; height: 35px;
			padding-top: 14px;
			margin: 0 3px;
			background: url('../images/exam-question.png') no-repeat center center;
			color: #dadada;
			text-align: center;
			font-size: 0.875em;
			font-weight: bold;
		}
			section.controlls .questions ul li a:hover {
				text-decoration: none;
			}
		
		section.controlls .questions ul li.done a {
			color: #009900;
			background-image: url('../images/exam-question-done.png');
			text-shadow: 0px 1px white; /* @todo add IE fix */
		}
		
		section.controlls .questions ul li.sel a {
			color: white;
			background-image: url('../images/exam-question-sel.png');
			text-shadow: 0px -1px #0d461e; /* @todo add IE fix */
		}


/* viewer Index menu */

section.index {
	background: url('../images/index-bg.png') no-repeat;
	display: none;
}
	section.index nav{
		float: left;
		width: 262px; height: 437px;
		margin:5px;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	
	section.index nav ul,
	section.index nav li {
		margin:0; padding:0;
		float: left;
		width: 100%;
	}
	
	section.index nav a {
		float: left;
		width: 199px;
		padding: 7px 10px 7px 37px;
	}
	
	section.index nav li {
		margin-bottom: 1px;
	}
	
		section.index nav > ul > li > a {
			border-bottom: 1px solid #809924;
			background: url('../images/index-minmax.png') no-repeat #99CC00;
			background-position: 11px 17px;
		}
		section.index nav > ul > li > a .chapter,
		section.index nav > ul > li > a .title{
			float: left;
		}
		section.index nav > ul > li > a .chapter{
			font-size: 0.688em;
			font-weight: bold;
			color: #009900;
			clear: both;
		}
		section.index nav > ul > li > a .title{
			font-size: 0.875em;
			color: white;
			clear: both;
		}
			section.index nav > ul > li > ul > li > a{
				font-size: 0.813em;
				font-weight: bold;
				border-bottom: 1px solid white;
				border-bottom: 1px solid #dcdcdc;
				color: #7a7a7a;
			}
			section.index nav > ul > li > ul > li:last-child > a{
				border:none;
			}
			section.index nav > ul > li > ul > li.done > a{
				color: #009900;
				background: url('../images/index-done.png') no-repeat 11px center;
			}
			section.index nav > ul > li > ul > li.sel > a{
				background: url('../images/index-current.png') no-repeat 11px center #f5f5f5;
				color: black;
			}
			
		
		section.index nav > ul > li.open > a {
			background-position: 11px -69px;
		}
		
	section.index nav ul > li > ul {
		margin: 1px 0 10px 0;
	}
	
	
/* Lightbox elements */

.lbContent h1 {
	float: left;
	width: 100%;
	margin: 0 0 25px 0;
	padding: 0 0 17px 0;
	background: url('../images/header-repeat.png') repeat-x center bottom;
	font-size:2.5em;
	font-weight: normal;
	color: #99CC00;
	text-shadow: 0px 1px #009744; /* @todo add IE fix */
	text-align: center;
}

.lbContent p {
	font-size: 0.875em;
	color: #9d9d9d;
	margin-right: 5%;
}

ul.downloads {
	list-style: none;
	padding:0;
	margin-top:0;
}

ul.downloads li {
	display: block;
	background: url('../images/icon-document.png') no-repeat #99CC00;
	background-position: 15px center;
	margin-bottom: 1px;
	
}	
	ul.downloads li > div{
		padding: 15px 10px 15px 80px;
		display: block;
	}
	ul.downloads li h2{
		color: white;
		font-size: 1.125em;
	}
	
	ul.downloads li p{
		color: black;
		font-size: 0.813em;
		margin: 5px 0 5px 0;
	}
	
	ul.downloads li a{
		font-size: 0.813em;
		font-weight: bold;
	}

/* Footer */



footer ul {	
	float: left;
	margin: 15px 0 100px 10px;
	padding:0;
	list-style: none;
	font-size: 0.688em;
	color: #717171;
}
	footer ul li{
		padding: 0 15px;
		float: left;
		border-left: 1px solid #d7d7d7;
	}
		footer ul li:first-child{
			padding-left: 0;
			border: none;
		}


/* ==========================================================================
   Slide styles
   ========================================================================== */


article.view {
	background-repeat: repeat;
}

article.view .row, article.view .wordsRow {
	background-repeat: repeat-x;
    background-position: center top;
}


article.view #flashContent {
	position: absolute;
	top:0px; left:0px;
	width: 960px; height: 607px;
}

/* SLIDE IMG RIGHT */

.imgRight .wrap{
	float: left;
	width: 425px;
	padding-right: 0;
}

.imgRight .imgContainer{
	position: absolute;
	top:65px; left: 470px;
}
	.imgRight .imgContainer img{
		float: left;
	}
	
/* SLIDE IMG LEFT */

.imgLeft .wrap{
	float: left;
	width: 425px;
	padding-right: 0;
	margin-left: 470px;
}

.imgLeft .imgContainer{
	position: absolute;
	top:65px; right: 470px;
}
	.imgRight .imgContainer img{
		float: right;
	}
	
.viewer .imgRight .imgContainer,
.viewer .imgLeft .imgContainer {
	display: none;
}

.no-js .viewer .imgRight .imgContainer,
.no-js .viewer .imgLeft .imgContainer {
	display: block;
}


	
/* SLIDE IMG WITH TITLE */


.viewer .imgTitle {
	background-repeat: no-repeat !important;
	background-position: center top;
}

.viewer .imgTitle .wrap {
	position: absolute;
	top:200px; left:50px;
	width: 287px; height: auto;
	padding: 20px 10px 10px 65px !important;
	background: url('../images/slide-title-bg.png') repeat-y;
}

.viewer .imgTitle .wrap h2,
.viewer .imgTitle .wrap p{
	color: white !important;
}

.viewer .imgTitle .wrap p {
	font-size:0.875em;
}


/* SLIDE VIDEO */

.viewer .videoFrame .wrap, #divvideo .wrap {
	position: absolute;
	background: url('../images/view-videoframe-bg.png') no-repeat;
	top:47px; left:8px;
	width: 946px; height: 467px;
	overflow: hidden;
	padding: 0 !important;
}
	.viewer .videoFrame .wrap #videoContainer, #divvideo .wrap #videoContainer2 {
		float: left;
		margin: 3px 4px;
		width: 938px; height: 459px;
	}


/* QUESTIONS STYLES */

.exam p.question {
	font-size: 1.313em;
	color: #009900 !important;
}

.exam p.hint {
	font-weight: bold;
	color: #3c3c3c !important;
}

.exam form .group {
	float: left;
	width: 100%;
	overflow: hidden;
	margin-bottom: 10px;
	padding: 3px;
	height: auto;
}

.exam form input[type="radio"] {
	float: left;
}

.viewer.exam form input[type="submit"] {
	margin-top: 20px;
}

.exam form .group label{
	float: left;
	margin-top: 4px;
	font-size: 0.875em;
	font-weight: bold;
	color: #686868;
	margin-left: 10px;
	width: 80%;
}


.checkbox {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	padding: 0 5px 0 0;
	background: url('../images/form-checkbox-sprite.png') no-repeat;
	display: block;
	clear: left;
	float: left;
	cursor: pointer;
}

.radio {
	width: 28px;
	height: 29px;
	padding: 0 5px 0 0;
	background: url('../images/exam-radio-sprite.png') no-repeat;
	display: block;
	clear: left;
	float: left;
	cursor: pointer;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}




/* ==========================================================================
   PLUGINS
   ========================================================================== */


.tipsy { font-size: 0.750em; font-weight: bold; position: absolute; padding: 5px; z-index: 100000; }
  .tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 5px 12px 4px 12px; text-align: center; }

  /* Rounded corners */
  .tipsy-inner { border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; }
  
  /* Uncomment for shadow */
  /*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/
  
  .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
  
  /* Rules to colour arrows */
  .tipsy-arrow-n { border-bottom-color: #000; }
  .tipsy-arrow-s { border-top-color: #000; }
  .tipsy-arrow-e { border-left-color: #000; }
  .tipsy-arrow-w { border-right-color: #000; }
  
	.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
    .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
    .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent; border-right-color: transparent;}
  .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
    .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
    .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
  .tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
  .tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }
  
/*! fancyBox v2.1.4 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
	padding: 0;
	margin: 0;
	border: 0;
	outline: none;
	vertical-align: top;
}

.fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8020;
}

.fancybox-skin {
	position: relative;
	background: #ffffff;
	color: #444;
	text-shadow: none;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
}

.fancybox-opened {
	z-index: 8030;
}

.fancybox-opened .fancybox-skin {
	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
	position: relative;
}

.fancybox-inner {
	overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
	-webkit-overflow-scrolling: touch;
}

.fancybox-error {
	color: #444;
	font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	margin: 0;
	padding: 15px;
	white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
	display: block;
	width: 100%;
	height: 100%;
}

.fancybox-image {
	max-width: 100%;
	max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
	background-image: url('../images/fancybox_sprite.png');
}

#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	margin-left: -22px;
	background-position: 0 -108px;
	opacity: 0.8;
	cursor: pointer;
	z-index: 8060;
}

#fancybox-loading div {
	width: 44px;
	height: 44px;
	background: url('../images/fancybox_loading.gif') center center no-repeat;
}

.fancybox-close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	z-index: 8040;
}

.fancybox-nav {
	position: absolute;
	top: 0;
	width: 40%;
	height: 100%;
	cursor: pointer;
	text-decoration: none;
	background: transparent url('../images/blank.gif'); /* helps IE */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	z-index: 8040;
}

.fancybox-prev {
	left: 0;
}

.fancybox-next {
	right: 0;
}

.fancybox-nav span {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 34px;
	margin-top: -18px;
	cursor: pointer;
	z-index: 8040;
	visibility: hidden;
}

.fancybox-prev span {
	left: 10px;
	background-position: 0 -36px;
}

.fancybox-next span {
	right: 10px;
	background-position: 0 -72px;
}

.fancybox-nav:hover span {
	visibility: visible;
}

.fancybox-tmp {
	position: absolute;
	top: -99999px;
	left: -99999px;
	visibility: hidden;
	max-width: 99999px;
	max-height: 99999px;
	overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
	overflow: hidden;
}

.fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 8010;
	background: url('../images/fancybox_overlay.png');
}

.fancybox-overlay-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
}

.fancybox-lock .fancybox-overlay {
	overflow: auto;
	overflow-y: scroll;
}

/* Title helper */

.fancybox-title {
	visibility: hidden;
	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	position: relative;
	text-shadow: none;
	z-index: 8050;
}

.fancybox-opened .fancybox-title {
	visibility: visible;
}

.fancybox-title-float-wrap {
	position: absolute;
	bottom: 0;
	right: 50%;
	margin-bottom: -35px;
	z-index: 8050;
	text-align: center;
}

.fancybox-title-float-wrap .child {
	display: inline-block;
	margin-right: -100%;
	padding: 2px 20px;
	background: transparent; /* Fallback for web browsers that doesn't support RGBa */
	background: rgba(0, 0, 0, 0.8);
	-webkit-border-radius: 15px;
	   -moz-border-radius: 15px;
	        border-radius: 15px;
	text-shadow: 0 1px 2px #222;
	color: #FFF;
	font-weight: bold;
	line-height: 24px;
	white-space: nowrap;
}

.fancybox-title-outside-wrap {
	position: relative;
	margin-top: 10px;
	color: #fff;
}

.fancybox-title-inside-wrap {
	padding-top: 10px;
}

.fancybox-title-over-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	padding: 10px;
	background: #000;
	background: rgba(0, 0, 0, .8);
}

.error
{
    color: #990000;
    font-weight: bold;
    padding: 0.5em 0em;
}

.words {
    display: none;
}


#modal, .modal {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1000;
}
.modal {
    background: rgba(255, 255, 255, 0.3);
}
.modal #wait {
    position:absolute;
    left:50%;
    top:50%;
    margin: -15px 0 0 -50px;
    width: 100px;
    height: 50px;
    background-color: white;
    border: solid 1px #9D9D9D;
    color: #9D9D9D;
    font-size: 1em;
    text-align: center;
    padding-top: 10px;
}

#emailPop {
    width: 400px;
    background: #ffffff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    padding: 2em;
    margin: 2em auto;
}
#emailPop H1 {
    text-align: left;
    font-size: 1.5em;
}



.button {
	padding:0px;
	border:none;
	background: none;
}
	.button.medium .caption {
		float: left;
		padding: 5px 0 0 17px;
		background: url(../images/button-medium-sprite.png) left top;
		height: 28px;
		text-align: center;
		color:#009900;
		font-weight: bold;
		text-shadow: 0px 1px white; /* @todo add IE fix */
	}
	.button.medium .cab {
		float: left;
		height: 33px;	width: 17px;
		background: url(../images/button-medium-sprite.png) right top;
	}

	.button.medium.sel .caption {
		background-position: left bottom;
	}
	.button.medium.sel .cab {
		background-position: right bottom;
	}
	.button.medium img {
		margin-top: -3px;
	}


	.button.big .caption{
		float: left;
		padding: 11px 0 0 17px;
		background: url(../images/button-big-sprite.png) left top;
		height: 32px;
		text-align: center;
		color:#009900;
		font-weight: bold;
		text-shadow: 0px 1px white; /* @todo add IE fix */
	}
	.button.big .cab {
		float: left;
		height: 43px;	width: 20px;
		background: url(../images/button-big-sprite.png) right top;
	}

	.button.big img {
		margin: -2px 0 0 7px;
	}

    .button.medium .progress {
		padding: 4px 0 0 5px;
		float: left;
		text-align: center;
		width: 74px; height:29px;
		background: url(../images/controlls-progress-sprite.png) no-repeat left top;
		color: white;
		font-weight: bold;
		font-size: 0.938em;
		text-shadow: 0px -1px black; /* @todo add IE fix */
	}

	.button.medium.sel .progress {
     		background-position: left bottom;
     	}

#testTimer {
    position: absolute;
    width: 100px;
    text-align: right;
    line-height: 1.6em;
    font-size: 1.888em;
    left: 50%;
    margin-left: 370px;
    z-index: 1000;
    color: #9D9D9D;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
}

section.controlls .infoBalloon{
 	position: absolute;
 	bottom: 50px;
    left: 50%;
    margin-left: 182px;
 	width: 108px;
    height: 0px;
 	padding-top: 0px;
 	background: url(../images/controlls-infoBalloon.png) no-repeat center top;
 	text-transform: uppercase;
 	text-align: center;
 	font-weight: bold;
 	font-size: 14px;
 	color: white;
 	overflow: hidden;
    text-shadow: 0px -1px #003e00;
}

.incorrect_question {
    font-size: 0.8em;
}

    .incorrect_question_question {
        font-weight: bold;
    }

    .incorrect_question_answer .selected {
        text-decoration: line-through;
    }

    .incorrect_question_answer .correct {
        color: #009900;
    }


.courses {
	margin-top: -260px;
	position: relative;
	float: left;
	width: 960px;
	overflow: hidden;
}

	.courses header {
		float: left;
		width: 100%;
		background: url(../images/courses-bg-top.png) center top no-repeat;
		text-align: center;
	}

		.courses header h2 {
			margin: 40px 0 10px 0;
			font-size: 1.250em;
			color: #009900;
		}
		
		.courses header p {
			font-size: 0.813em;
			color: #8d8d8d;
			margin: 5px;
		}
		
		.courses .legend {
			position: absolute;
			right: 73px; top: 37px;
		}
			.courses .legend ul{
				list-style: none;
			}	
				.courses .legend ul li{
					float: left;
					clear: both;
					font-size: 0.750em;
					font-weight: bold;
					color: #848484;
					margin-bottom: 4px;
				}
					.courses .legend ul li img{
						float: left;
						margin:-2px 6px 0 0;
					}
		
	.courses .shelves {
		float: left;
		width: 100%;
		background: url(../images/courses-bg-middle.png) center top repeat-y;
	}
	
		.courses .shelves ul{
			float: left;
			list-style: none;
			width: 912px;
			margin:-5px 0 0 0; padding: 0 0 100px 48px;
			background: url(../images/courses-bg-shelf.png) center 8px repeat-y;
			overflow: hidden
		}
			.courses .shelves ul li {
				position: relative;
				float: left;
				margin: 40px 19px 31px 1px;
				width: 157px; height: 157px;
				background: url(../images/courses-bg-book.png) no-repeat;
				cursor: pointer;
			}
				
				.courses .shelves .title,
				.courses .shelves .overlay,
				.courses .shelves .image {
					position: absolute;
					top: 4px; left: 2px;
					width: 148px;
					
				}
                                
                                .courses .shelves .image img {
                                    width: 100%;
                                    height: 100%;
                                }
				
				.courses .shelves .title{
					position: absolute;
					padding: 15px;
					height: auto; width: 119px;
					overflow: hidden;
					background-color: rgba(0,0,0,0.7);
				}
					.courses .shelves ul li .title h3{
						color: white;
						font-size:1.063em;
						margin: 0;
						text-shadow: 0px -1px black;
						line-height: 1.2em;
					}
					.courses .shelves ul li .title p{
						color: #a6ce39;
						font-size: 0.750em;
						margin: 0;
						text-shadow: 0px -1px black;
					}
					
				html.no-rgba .courses .shelves .title{
					background-color: #000000;
				}
				
				.courses .shelves .overlay {
					height: 147px; width: 147px;
					
					 -webkit-transition: all 0.15s;
					 -moz-transition: all 0.15s;
					 -o-transition: all 0.15s;
					 -ms-transition: all 0.15s;
					 transition: all 0.15s;
					 
					 border: 1px solid rgba(0,0,0,0.4);
					 
					 background: url(../images/courses-bg-overlay.png) repeat-x center bottom;
				}
					.courses .shelves ul li:hover .overlay {
						border: 4px solid rgba(0,153,0,1);
						height: 141px; width: 141px;
					}
					
				html.no-rgba .courses .shelves .overlay {
					border: 1px solid #000000;
				}
					html.no-rgba .courses .shelves ul li:hover .overlay {
						border: 4px solid #009900;
					}
				
				.courses .shelves .good,
                                .courses .shelves .bad{
					position: absolute;
					bottom:4px; right: 6px;
					width: 33px; height: 36px;
					background-color: white;
				}
					.courses .shelves .good{
						background: url(../images/icon-good.png) #009900 center center no-repeat;
					}
					
					.courses .shelves .bad{
						background: url(../images/icon-bad.png) #ed0000 center center no-repeat;
					}
					
	
	.courses .bottom {
		float: left;
		height: 30px; width: 960px;
		background: url(../images/courses-bg-bottom.png) no-repeat center bottom;
	}
        
        
::-webkit-scrollbar {
    width: 2.0em;
}

::-webkit-scrollbar-button {
    background: #ccc;
}
::-webkit-scrollbar-track-piece {
    background: #888;
}
::-webkit-scrollbar-thumb {
    background: #eee;
}


.testquestion {
    position: absolute;
    top: 125px;
    left: 630px;
    width: 320px;
    height: 240px;
}

.testvideo {
    position: absolute;
    top: 125px;
    left: 20px;
    width: 320px;
    height: 240px;
}

.switchcontext {
    float: right;
    clear: none;
    width: 300px;
    height: 20px;
    text-align: right;
    margin-right: -190px;
}

#slideImages {
    max-width: 100%;
}

#slideImages img {
    margin: 0;
    display: block;
    float: left;
    max-width: 100%;
}

#slideImages .audioPlay {
    max-width: 25%;
}


.confirmButton,
.denyButton {
	background-color: #99CC00;
	border: 1px solid #009900;
	color: white;
	font-size: 0.813em;
	font-weight: bold;
	padding: 5px 10px;
	text-align: center;
}
.denyButton {
	background-color: #d90000;
	border: 1px solid #800000;
	margin-left: 25px;
}
.confirm-deny-message {
	display: none;
	color: #4f4f4f;
	font-size: 0.875em;
	margin-top: 10px;
}