/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

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

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

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

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

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

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

/*
 * A better looking default horizontal rule
 */

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

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

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

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

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

/* ==========================================================================
   Navigation styles
   ========================================================================== */
#nav {
	position:relative;
	width:990px;
	/*background-color: #ccc;*/
	
}

ul#navigation {
	width: 958px;
	margin:0px auto;
	position:relative;
	float:left;
	/*border-left:1px solid #c4dbe7;
	border-right:1px solid #c4dbe7;
	background-color: #ccc;
	-webkit-border-radius: 5px;
	border-radius: 5px;*/
}

ul#navigation li {
	display:inline;
	font-size:18px;
	/*font-weight:bold;*/
	margin:0;
	padding:0;
	float:left;
	position:relative;
	/*border-top:1px solid #c4dbe7;
	border-bottom:2px solid #c4dbe7;*/
}

ul#navigation li a {
	padding:10px 25px;
	color:#616161;
	text-shadow:1px 1px 0px #fff;
	text-decoration:none;
	display:inline-block;
	/*border-right:1px solid #fff;
	border-left:1px solid #C2C2C2;
	border-top:1px solid #fff;
	background: #f5f5f5;*/
	
	-webkit-transition:color 0.2s linear, background 0.2s linear;	
	-moz-transition:color 0.2s linear, background 0.2s linear;	
	-o-transition:color 0.2s linear, background 0.2s linear;	
	transition:color 0.2s linear, background 0.2s linear;	
}

ul#navigation li a:hover {
	background:#f8f8f8;
	color:#282828;
}

ul#navigation li:hover > a {
	background:#fff;
}

/* Drop-Down Navigation */
/* muss über js gesteuert werden, damit das auch auf dem ipad funktioniert */
/*ul#navigation li:hover > ul
{
	visibility:visible;
	opacity:1;
}*/

ul#navigation ul, ul#navigation ul li ul {
	list-style: none;
    margin: 0;
    padding: 0;    
	visibility:hidden;
    position: absolute;
    z-index: 99999;
	width:280px;
	background:#f8f8f8;
	box-shadow:1px 1px 3px #ccc;
	opacity:0;
	-webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 
	-moz-transition:opacity 0.2s linear, visibility 0.2s linear; 
	-o-transition:opacity 0.2s linear, visibility 0.2s linear; 
	transition:opacity 0.2s linear, visibility 0.2s linear; 	
}

ul#navigation ul {
    top: 43px;
    left: 1px;
}

ul#navigation ul li ul {
    top: 0;
    left: 181px;
}

ul#navigation ul li {
	clear:both;
	width:100%;
	border:0 none;
	border-bottom:1px solid #c9c9c9;
}

ul#navigation ul li a {
	background:none;
	padding:7px 15px;
	color:#616161;
	text-shadow:1px 1px 0px #fff;
	text-decoration:none;
	display:inline-block;
	border:0 none;
	float:left;
	clear:both;
	width:250px;
}

ul#navigation li a.first {
	border-left: 0 none;
}

ul#navigation li a.last {
	border-right: 0 none;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body, html {
	background-color: #ffffff;	
	font-family: 'Raleway', sans-serif;
	font-size: 20px;
	-khtml-user-select: none;
	-moz-user-select:none;
}

.loader {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.5);
	z-index: 9999;
	top: 0px;
}

.loader img{
	position: relative;
	top: 50%;
	left: 50%;
	margin-top: -16px;
	margin-left: -16px;
}

#wrapper {
	width: 990px;
	height: 652px;
	margin: 0 auto;
	background-color: #fff;
	margin-top: 5px;
	position: relative;
	clear: both;
	display: none;
}

#imprint,
#feedback {
	width: 1000px;
	height: 620px;
	position: absolute;
	top: 45px;
	z-index: 1;
}

#imprint_cover,
#feedback_cover{
	position:absolute;
	width: 295px;
	height: 206px;
	background-color: #fff;
	left: 677px;
	top: 344px;
}

#feedback_cover {
	display: none;
	height: 220px;	
}

#feedback_cover a{
	color: #000;
	text-decoration: none;
	font-weight: bold;
}

#imprint_btn{
	width: 90px;
	height: 26px;
	position: absolute;
	left: 844px;
	top: 559px;
	cursor: pointer;
}

#feedback_btn{
	width: 80px;
	height: 26px;
	position: absolute;
	left: 750px;
	top: 559px;
	cursor: pointer;
}

#preloadContainer {
	display: none;
}

#startScreen {
	width: 990px;
	height: 652px;
	background: url('img/startimage.jpg') top left no-repeat;
	position: absolute;	
	z-index: 1;
}

#startButtonHome {
	position: relative;
	width: 250px;
	height: 50px;
	top: 545px;
	left: 740px;
	cursor: pointer;
}


#content {
	width: 990px;
	height: 606px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 5px solid #c9c9c9;
	margin-top: 45px;
	background: url('img/startInfoScreen.jpg') top left no-repeat;
	position:relative;
	overflow: hidden;
	
}

.contentPositionBox {
	position:absolute;
	
	top: 0px;
	left: 0px;
	
}

.chapter {
	width: 990px;
	height: 606px;
	position: absolute;
}

.drag {
	position: absolute;
	z-index: 11;
	cursor: pointer;
	
}

.dragWord {
	position: relative;
	top: 30%;
	text-align: center;
}

.drop {
	position: absolute;
	z-index: 10;
}

.border {
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 5px solid #fff;
}

.shadow {
	-webkit-box-shadow:  2px 2px 4px 2px rgba(0, 0, 0, 0.5);
	box-shadow:  2px 2px 4px 2px rgba(0, 0, 0, 0.5);
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.nextBtn {
	width: 52px;
	height: 46px;
	position: absolute;
	cursor: pointer;
	
}


#infoScreen, #resultScreen, #answerResultScreen, #galeria, #grammatica, #charta {
	width: 990px;
	height: 606px;
	background-color: rgba(255,255,255,0.5);
	position: absolute;
	top: 50px;	
	left: 5px;
	z-index: 8000;
	display: none;	
	font-size: 16px!important;
}

#answerResultScreen {
	cursor: pointer;
	z-index: 8001;
}

#answerResultScreen img{
	position: relative;
	top: 214px;
	left: 406px;
	display: none;
}

#exerciseInfoBox, #resultInfoBox {
	width: 790px;
	height: 190px;
	margin: 0 auto;
	margin-top: 200px;
	background-color: #fff;
	overflow: hidden;
	padding: 8px;
}

#resultScreen {
	z-index: 8001;	
}

#resultInfoBox {
	margin-top: 50px;
}

#startExerciseBtn, #resultSendBtn {
	width: 100px;
	height: auto;
	background-color: #fff;
	margin-top: 20px;
	margin-right: 100px;
	float: right;
	text-align: center;
	cursor: pointer;
	padding: 5px;
}

#startExerciseBtn {
	margin-right: 384px;
	margin-top: 400px;
	background-color: grey;
	color: #fff;
	width: 200px;
}

.userData {
	margin-left: 100px;
	margin-top: 20px;
	width: 300px;
}

#studentName {
	width: 245px;
}

#teacherSelection {
	width: 250px;
	margin-top: 10px;
}

.additionalInfoBox {
	width: 790px;
	height: auto;
	background-color: #fff;
	margin: 0 auto;
	padding: 8px;
	margin-top: 100px;
	display: none;
}

.additionalInfoBox input {
	width: 99%;
	margin-top: 3px;
}

#dictateAnswer {
	height: 31px;
	font-size: 20px;
}

input:focus {
	border: none;
	outline: none;
}

#multipleChoiceQuestionBox, 
#multipleChoiceAnswersBox, 
#clozeTipBox, 
#clozeBox,
#dictateBox,
#dictateAnswerBox {
	width: 790px;
	height: 100px;
	top: 150px;
	left: 50%;
	margin-left: -400px;
	background-color: #fff;
	overflow: hidden;
	padding: 8px;
	position: absolute;
}

#multipleChoiceAnswersBox,
#dictateAnswerBox,
#clozeBox {
	height:auto;
	color: #000;
	
	position: relative;
	top: 0px;
	left: 0px;
	margin-left: 0px;
	width: 95%;
}

#multipleChoiceQuestionBox,
#dictateBox,
#clozeTipBox {
	height:auto;
	color: #000;
	font-size: 20px;
	font-weight: bold;
	
	position: relative;
	top: 0px;
	left: 0px;
	margin-left: 0px;
	width: 100%;
}

#multipleChoiceAnswersBox {
	font-size: 20px;
}

#multipleChoiceAnswersBox input{
	margin-bottom: 10px;
}

#multipleChoiceResult {
	height: 20px;
	top:10px;
	text-align: center;
	color: #f00;
}

#nextQuestionBtn, 
#clozeResultBtn, 
#dictateResultBtn {
	width: 204px;
	height: 50px;
	padding: 8px;
	background-color: #fff;
	text-align: center;
	cursor: pointer;
	position: absolute;
	bottom: 50px;
	/*left: 50%;
	margin-left: -110px;*/
	
}

#clozeResultBtn, 
#dictateResultBtn {
	height: 30px;
}

#clozeTipBox {
	/*top:80px;*/
}

#clozeBox {
	/*top: 200px;*/
	height: auto;
	/*min-height: 100px;*/
	padding: 8px;
	/*top: 50%;
	margin-top: -20px;*/
	
}

#clozeBox input {
	width: 160px;
	font-weight: bold;
}

#dictateAnswerBox {
	/*top: 280px;*/
	height:auto;
}

#dictateAnswerBox input {
	width: 99%;
	margin: 0 auto;
	border: none;
	outline: none;
	background: none;
	padding: 0px;
	height: auto;
}

#galeria, #grammatica, #charta{
	background: #fff;
}

#charta img {
	display: none;
	cursor: pointer;
}

#charta_basis {
	cursor: default!important;	
}

#charta_overlay {
	width: 990px;
	height: 606px;
	position: absolute;
	top: 0px;
	z-index: 2;
	background-color: rgba(255,255,255,0.7);
	display: none;
}


#charta_1_click{
	width: 43px;
	height: 33px;
	position: absolute;
	top: 364px;
	left: 800px;
	cursor: pointer;
}

#charta_2_click{
	width: 51px;
	height: 58px;
	position: absolute;
	top: 345px;
	left: 748px;
	cursor: pointer;
}

#charta_3_click{
	width: 70px;
	height: 52px;
	position: absolute;
	top: 293px;
	left: 741px;
	cursor: pointer;
}

#charta_4_click{
	width: 32px;
	height: 20px;
	position: absolute;
	top: 273px;
	left: 742px;
	cursor: pointer;
}

#charta_5_click{
	width: 21px;
	height: 19px;
	position: absolute;
	top: 373px;
	left: 854px;
	cursor: pointer;
}

#charta_6_click{
	width: 71px;
	height: 69px;
	position: absolute;
	top: 11px;
	left: 556px;
	cursor: pointer;
}

#charta_7_click{
	width: 83px;
	height: 54px;
	position: absolute;
	top: 547px;
	left: 631px;
	cursor: pointer;
}

.charta_popup_img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 40;
}

.charta_popup_btn{
	position: absolute;
	cursor: pointer;
	display: none;
	z-index: 41;
}

.charta_1_a_btn{
	width: 241px;
	height: 30px;
	top: 132px;
	left: 252px;
}

.charta_1_b_btn{
	width: 241px;
	height: 30px;
	top: 132px;
	left: 492px;
}

.charta_2_a_btn{
	width: 188px;
	height: 34px;
	top: 110px;
	left: 306px;
}

.charta_2_b_btn{
	width: 188px;
	height: 34px;
	top: 110px;
	left: 497px;
}

.charta_3_a_btn{
	width: 181px;
	height: 34px;
	top: 122px;
	left: 323px;
}

.charta_3_b_btn{
	width: 181px;
	height: 34px;
	top: 122px;
	left: 505px;
}

.charta_4_a_btn{
	width: 130px;
	height: 34px;
	top: 118px;
	left: 309px;
}

.charta_4_b_btn{
	width: 130px;
	height: 34px;
	top: 118px;
	left: 442px;
}

.charta_4_c_btn{
	width: 130px;
	height: 34px;
	top: 118px;
	left: 575px;
}

.charta_5_a_btn{
	width: 158px;
	height: 34px;
	top: 153px;
	left: 260px;
}

.charta_5_b_btn{
	width: 158px;
	height: 34px;
	top: 153px;
	left: 419px;
}

.charta_5_c_btn{
	width: 158px;
	height: 34px;
	top: 153px;
	left: 577px;
}

.charta_6_a_btn{
	width: 192px;
	height: 34px;
	top: 111px;
	left: 313px;
}

.charta_6_b_btn{
	width: 192px;
	height: 34px;
	top: 111px;
	left: 508px;
}

.charta_7_a_btn{
	width: 255px;
	height: 34px;
	top: 143px;
	left: 250px;
}

.charta_7_b_btn{
	width: 255px;
	height: 34px;
	top: 143px;
	left: 506px;
}

.charta_multiple {
	position: absolute;
	left: 26px;
	background-color: #fff;
																	display: none;
}

.charta_multiple_1{
	width: 250px;
	height: 40px;
	top: 157px;	
}

.charta_multiple_2{
	width: 388px;
	height: 91px;
	top: 205px;
}

.charta_multiple_3{
	width: 253px;
	height: 45px;
	top: 302px;
}

.charta_multiple_4{
	width: 372px;
	height: 81px;
	top: 356px;
}

.charta_multiple_5{
	width: 354px;
	height: 42px;
	top: 449px;
}

.charta_multiple_6{
	width: 290px;
	height: 40px;
	top: 500px;
}

.charta_multiple_btn{
	position: absolute;
	cursor: pointer;
	/*display: none;*/
										background-color: rgba(255,0,0,0.2);
}
.charta_multiple_1_a{
	/*width: 52px;
	height: 12px;*/
	top: 177px;
	left: 30px;
}

.charta_multiple_1_b{
	/*
width: 49px;
	height: 12px;
*/
	top: 177px;
	left: 82px;
}

.charta_multiple_1_c{
	/*
width: 38px;
	height: 12px;
*/
	top: 177px;
	left: 133px;
}

.charta_multiple_1_d{
	/*
width: 76px;
	height: 12px;
*/
	top: 177px;
	left: 177px;
}

.charta_multiple_2_a{
	/*
width: 135px;
	height: 12px;
*/
	top: 230px;
	left: 30px;
}

.charta_multiple_2_b{
	/*
width: 159px;
	height: 12px;
*/
	top: 244px;
	left: 30px;
}

.charta_multiple_2_c{
	/*
width: 110px;
	height: 12px;
*/
	top: 258px;
	left: 30px;
}

.charta_multiple_2_d{
	/*
width: 123px;
	height: 12px;
*/
	top: 272px;
	left: 30px;
}

.charta_multiple_3_a{
	/*
width: 52px;
	height: 12px;
*/
	top: 324px;
	left: 30px;
}

.charta_multiple_3_b{
	/*
width: 49px;
	height: 12px;
*/
	top: 324px;
	left: 90px;
}

.charta_multiple_3_c{
	/*
width: 58px;
	height: 12px;
*/
	top: 324px;
	left: 138px;
}

.charta_multiple_3_d{
	/*
width: 47px;
	height: 12px;
*/
	top: 324px;
	left: 204px;
}

.charta_multiple_4_a{
	/*
width: 156px;
	height: 12px;
*/
	top: 376px;
	left: 30px;
}

.charta_multiple_4_b{
	/*
width: 113px;
	height: 12px;
*/
	top: 390px;
	left: 30px;
}

.charta_multiple_4_c{
	/*
width: 128px;
	height: 12px;
*/
	top: 404px;
	left: 30px;
}

.charta_multiple_4_d{
	/*
width: 155px;
	height: 12px;
*/
	top: 418px;
	left: 30px;
}

.charta_multiple_5_a{
	/*
width: 67px;
	height: 12px;
*/
	top: 469px;
	left: 30px;
}

.charta_multiple_5_b{
	/*
width: 49px;
	height: 12px;
*/
	top: 469px;
	left: 98px;
}

.charta_multiple_5_c{
	/*
width: 39px;
	height: 12px;
*/
	top: 469px;
	left: 149px;
}

.charta_multiple_5_d{
	/*
width: 76px;
	height: 12px;
*/
	top: 469px;
	left: 193px;
}

.charta_multiple_6_a{
	/*
width: 43px;
	height: 12px;
*/
	top: 522px;
	left: 30px;
}

.charta_multiple_6_b{
	/*
width: 40px;
	height: 12px;
*/
	top: 522px;
	left: 85px;
}

.charta_multiple_6_c{
	/*
width: 58px;
	height: 12px;
*/
	top: 522px;
	left: 130px;
}

.charta_multiple_6_d{
	/*
width: 40px;
	height: 12px;
*/
	top: 522px;
	left: 192px;
}




#galeria li,
#grammatica li {
	float: left;
	list-style: none;
	padding: 20px;
	cursor: pointer;
}
.galeria_chapitel{
	width: 100%;
	margin-top: 100px;
	clear: both;
	background-color: #f00;
	display: none;
}

.galeria_chapitel_item {
	height: 250px;
	width: 200px;
	float: left;
	margin-left: 20px;
	
}

.galeria_chapitel_item img {
	border: 2px solid #ccc;
}

.galeria_chapitel_item a {
	color: #000;
	text-decoration: none;
}

.galeria_chapitel_item a:hover {
	text-decoration: underline;
}

#grammatica {
	width: 988px;
	height: 606px;
}

.grammatica_start {
	position: absolute;
	width: 988px;
	height: 606px;
	top: 0px;
	background: url(img/Startbild_Grammatica.jpg) top left no-repeat;
}

.palm {
	position: absolute;
	width: 304px;
	height: 310px;
	right: 123px;
	top: 140px;
	cursor: pointer;
}

.tree {
	position: relative;
	width: 304px;
	height: 279px;
	margin-left: 132px;
	margin-top: 172px;
	cursor: pointer;
}

.grammatica_screen_1 {
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
}

#particlas,
.particlas_screen a {
	color: #19a929;
}

#adjectivs,
.adjectivs_screen a {
	color: #fdc42a;
}

#pronoms,
.pronoms_screen a {
	color: #ff8000;
}

#nomens,
.nomens_screen a {
	color: #c39567;
}

#verbs,
.verbs_screen a {
	color: #0078ff;
}

.grammatica_choice {
	clear: both;
	display: none;
	margin-top: 10px;
}

.grammatica_choice li {
	clear: both;
	list-style: none;
	padding: 5px!important;
	margin-left: 15px;
}

.grammatica_choice a {
	text-decoration: none;
}

.grammatica_choice a:hover {
	text-decoration: underline;
}

.audioBtn {
	width: 51px;
	height: 60px;
	position: absolute;
	background: url('img/audio.png') top left no-repeat;
	cursor: pointer;
}

iframe,
object {
	position: absolute;
	
}

.stopwatch {
	width: 113px;
	height: 35px;
	position: absolute;
	font-size: 22px;
	padding: 12px 5px 5px 5px;
	white-space: nowrap;
}

/* disabled drag objects opacity*/
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
    opacity: 0.5!important;
}

/* ==========================================================================
   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.
   These 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.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@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;
    }
}