@charset "UTF-8";


/**
* Hide elements visually, but keep them available for screen-readers.
*
* Used for information required for screen-reader users to understand and use
* the site where visual display is undesirable. Information provided in this
* manner should be kept concise, to avoid unnecessary burden on the user.
* "!important" is used to prevent unintentional overrides.
*/
.element-invisible {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}

/**
* The .element-focusable class extends the .element-invisible class to allow
* the element to be focusable when navigated to via the keyboard.
*/
.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
position: static !important;
clip: auto;
}

/**
* The .element-focusable-hidden class extends the .element-invisible class to allow
* the element to be focusable when navigated to via the keyboard but still not seen.
*/
.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
position: absolute;
opacity: 0;
clip: auto;
}


body {
	background: rgb(242, 242, 242) url(background.jpg) no-repeat top left;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
}

#wrapper {
	max-width: 965px;
	min-width: 320px;
	margin: 0 auto;
	position: relative;
	min-height: 100%;
}

#header {
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 50px;
	padding-right: 50px;
	/* small screens only */
	text-align: center;
}

	@media only screen and (min-width: 800px) {
		#header {
			text-align: justify;
		}

		div#header:after {
			content: '';
			width: 100%; 
			display: inline-block;
		}
	}

#logo {
	display: inline-block;
	vertical-align: middle;
}

#header-right {
	display: inline-block;
	padding-top: 15px;
	vertical-align: middle;

	/* small screens only */
	text-align: center;
}

	@media only screen and (min-width: 800px) {
		#header-right {
			text-align: left;
		}
	}

#logo img {
	width: 277px;
	height: 96px;
}

#content {
	clear: both;

	background-color: rgb(255, 255, 255);
	padding: 20px 20px 0px 20px;
	margin-bottom: 50px;
	border-radius: 20px;

	box-shadow: 0px 0px 4px rgba(0,0,0,.5);
}

#displayPage {
	display: none;
}

h1 {
	text-transform: uppercase;
	font-weight: bold;
	color: rgb(39, 23, 75);
	margin-top: 0px;
	margin-bottom: 5px;
}

h2 {
	text-transform: uppercase;
	color: rgb(39, 23, 75);
}

div#welcome {
	text-align: left;
}

div[id^="module_"], div#modules {
	display: none;
}

#modules fieldset {
	display: none;
}

#timer {
	display: none;
}

#timer {
	text-align: center;
	padding: 15px;
	background: rgb(39, 23, 75);
	color: white;
	font-size: 20px;
	border-radius: 5px;
	margin-top: 20px;

	padding-left: 50px;
	background-image: url(images/hourglass.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 10px center;
}

	@media only screen and (min-width: 800px) { 
		#timer {
			float: right;
		}
	}

form input,
form select {
	/* small screens only */
	display: inline-block;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	border: 1px solid gray;
	border-radius: 5px;
	font-size: inherit;
	padding: 5px 10px;
}

form input,
form select,
form select:focus,
textarea {
	font-size: inherit; /* to prevent zoom on mobile */
}


form ul {
	list-style: none;
	padding-left: 10px;
}

form ul.contact-data {
	text-align: center;
	padding-left: 0;
}

form ul.contact-data li {
	display: block;
	text-align: justify;
	margin-bottom: 15px;
}

form ul.contact-data li label {
	text-align: left;
	margin-right: 10px;

	/*small screens only */
	display: block;
}

form ul.contact-data li label span {
	display: block;

	/* small screens only */
	text-align: left;
}

form ul.contact-data li label.required span:before {
	content: "*";
	margin-right: 2px;
	display: inline-block;
	color: red;
}

form ul.contact-data li input {
	line-height: 1.5;
	font-size: 18px;

	/* small screens only */
	display: block;
	width: 100%;
	box-sizing: border-box;
}

	@media only screen and (min-width: 800px) {
		form ul.contact-data li label {
			width: auto;
			min-width: 160px;
			display: inline-block;
		}

		form ul.contact-data li label span {
			text-align: right;
		}

		form ul.contact-data li input {
			display: inline-block;
			width: auto;
		}
}

form ul.lines-mistakes {
	/* small screens only */
	padding-left: 0;
	margin-left: 0;
}

form ul.lines-mistakes li {
	display: block;
	padding-bottom: 20px;
	padding-top: 20px;
	padding-left: 0;
	margin-left: 0;

	/* small screens only */
	border-bottom: solid 1px;
}

form ul.lines-mistakes li span.line {
	/*small screens only*/
	display: block;
}

form ul.lines-mistakes li input.correction {
	box-sizing: border-box;

	/*small screens only*/
	display: block;
	width: 100%;
}

	@media only screen and (min-width: 800px) {
		form ul.lines-mistakes {
			padding-left: 40px;
			margin-left: 0;
		}

		form ul.lines-mistakes li {
			border-bottom: none;
		}

		form ul.lines-mistakes li span.line {
			display: inline-block;
			width: 60%;
			margin-right: 10%;
			border-top: none;
			border-bottom: solid 1px rgb(150,150,150);
		}

		form ul.lines-mistakes li input.correction {
			display: inline-block;
			width: 20%;
			vertical-align: top;
		}
	}

form input[type=radio] {

}

form input[type=radio] + label {
	line-height: 1.5;
	display: inline-block;
	padding: 5px;
	padding-left: 35px;
	min-height: 40px;
	background-image: url(images/radio.png);
	background-size: 25px 25px;
	background-repeat: no-repeat;
	background-position: 5px 5px;
}

	form input[type=radio].dontknow + label {
		color: rgb(80,80,80);
		background-image: url(images/radio-dontknow.png);
		background-size: 25px 25px;
		background-repeat: no-repeat;
		background-position: 5px 5px;
	}

form input[type=radio]:checked + label {
	color: rgb(47, 37, 83);
	background-image: url(images/radio-checked.png);
	background-size: 25px 25px;
	background-repeat: no-repeat;
	background-position: 5px 5px;
}

	form input[type=radio].dontknow:checked + label {
		color: rgb(51,51,51);
		background-image: url(images/radio-dontknow-checked-3.png);
		background-size: 25px 25px;
		background-repeat: no-repeat;
		background-position: 5px 5px;
	}

form input[type=checkbox] {
}

form input[type=checkbox] + label {
	line-height: 1.5;
	display: inline-block;
	padding: 5px;
	padding-left: 45px;
	min-height: 30px;
	background-image: url(images/checkbox.png);
	background-size: 25px 25px;
	background-repeat: no-repeat;
	background-position: 10px 0px;
}

form input[type=checkbox]:checked + label {
	background-image: url(images/checkbox-checked.png);
	background-size: 25px 25px;
	background-repeat: no-repeat;
	background-position: 10px 0px;
}

form input[type=checkbox]:focus,
form input[type=radio]:focus {
}


form input[type=checkbox]:focus + label,
form input[type=radio]:focus + label {
	text-decoration: underline;
}


form input[type=checkbox]:focus:active + label,
form input[type=radio]:focus:active + label {
	/*outline: none;*/
}

form select:focus {
	/*outline: solid 3px rgb(39, 23, 75);*/
}

form .image-container {
	text-align: center;
}

form .image-container.image-count-1 img {
	display: inline-block;
	box-sizing: border-box;
	/* small screens only */
	max-width: 60%;
}

	form .image-container.image-count-1.image-widescreen img {
		/* small screens only */
		max-width: 90%;
	}

form .image-container.image-count-even img {
	display: inline-block;
	box-sizing: border-box;
	/* small screens only */
	max-width: 40%;
}

form .image-container.image-count-odd img {
	display: inline-block;
	box-sizing: border-box;

	/* small screens only */
	max-width: 40%;
}

	@media only screen and (min-width: 800px) {
		form .image-container.image-count-1 img {
			max-width: 250px;
		}

			form .image-container.image-count-1.image-widescreen img {
				max-width: 400px;
			}

		form .image-container.image-count-even img,
		form .image-container.image-count-odd img {
			max-width: 250px;
		}
	}

form .newspaper-article {
	background: rgb(255, 243, 222);
	padding: 20px;
	text-align: center;
	max-width: 35em;
	margin: 0 auto;
	border: dashed 2px black;
}

form .newspaper-article p,
form .newspaper-article ul {
	max-width: 30em;
	text-align: left;
}

form .newspaper-article p.newspaper-article-headline {
	font-weight: bold;
	text-transform: uppercase;
}

form .newspaper-article.newspaper-article-headline-missing p:first-of-type:before {
	content: "?\00a0?\00a0?";
	font-size: 200%;
	margin-bottom: 20px;
	display: block;
	border-bottom: solid 2px black;
	color: rgb(150,150,150);
}

form ul.headlines {
	text-transform: uppercase;
    font-weight: bold;
}

form .time-display {
	font-size: 200%;
    border: solid 2px;
    display: inline-block;
    padding: 20px;
    border-radius: 5px;
    color: white;
    background: black;
}

form .letter {

	padding: 30px;
	border-radius: 10px;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfaf2+0,f2edde+100 */
	background: #fcfaf2; /* Old browsers */
	background: -moz-linear-gradient(top, #fcfaf2 0%, #f2edde 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #fcfaf2 0%,#f2edde 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #fcfaf2 0%,#f2edde 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfaf2', endColorstr='#f2edde',GradientType=0 ); /* IE6-9 */
}

form span.gap {
	display: inline-block;
    border: dotted 2px black;
    padding: 5px 20px;
    line-height: 1;
    border-radius: 5px;
    font-size: 100%;
    margin-left: 10px;
    margin-right: 10px;
}

/*
form ul.conversation li.speaker-a {
	list-style-type: circle;
	list-style-position: inside;
	padding-left: 20px;
}

form ul.conversation li.speaker-b {
	list-style-type: square;
	padding-left: 60px;
	list-style-position: inside;
}

form ul.conversation li.speaker-a > p,
form ul.conversation li.speaker-b > p {
	display: inline;
}
*/

form .shopping-centre-header {
	font-weight: bold;
	text-align: center;
	font-size: larger;
}

form .shopping-centre-header-small {
	font-weight: bold;
	font-style: italic;
	font-size: larger;

	margin-bottom: 0;
	border-bottom: solid 1px;

	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
}

form .shopping-centre-text {
	margin-top: 0;

	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
}

form span.task-important-words {
	font-weight: bold;
	text-decoration: underline;
}

div#connection-notice {
	font-size: 90%;
	margin: 0 auto;
	max-width: 80%;
}

a.button {
	display: inline-block;
	padding: 10px;
	background-color: rgb(47, 37, 83);
	color: white;
	text-align: center;
	cursor: pointer;

	transition: background .5s;
	border-radius: 5px;
}

a.button:hover,
a.button:focus,
a.button:active {
	background-color: rgb(29, 18, 56);
}


a.button.disabled,
a.button.disabled:hover,
a.button.disabled:focus,
a.button.disabled:active {
	background-color: rgb(80,80,80);
	pointer-events: none;
}

a.language-button {
	background-color: rgb(242,242,242);
	color: rgb(47, 37, 83);
}


a.language-button.active {
	background-color: rgb(47, 37, 83);
	color: white;
}

a.next-button {
	display: block;
	margin-top: 15px;
	font-size: 1.3em;
	text-decoration: none;
}


a.next-button:focus,
a.next-button:active {
	background-color: #f36c23;
}

.language-panel {
	float: right;
}

.loc.de {
	line-height: 1.5;
}

.loc.en {
	line-height: 1.5;
	font-style: italic;
}

fieldset{
	line-height: 2em;
	border-radius: 5px;
	border: solid 1px rgb(29, 18, 56);
}

.confidentiality-agreement {
	font-size: 90%;
	line-height: 2;
	margin: 0 auto;
	/* small screens only*/
	max-width: 90%;
}

	@media only screen and (min-width: 800px) {
		.confidentiality-agreement {
			max-width: 70%;
			text-align: justify;
		}
	}

div#confidentiality-checkbox-container {
	/* small screens only */
	text-align: center;
}

div#confidentiality-checkbox-container label {
	display: inline-block;
	margin-top: 30px;
}

	@media only screen and (min-width: 800px) {

		div#confidentiality-checkbox-container {
			text-align: left;
		}
	}

legend {
	color: rgb(39, 23, 75);
}

fieldset p:nth-child(2) {
	margin-top: 0px;
}

#progressbar {
	height: 30px;
	border: solid 1px rgb(47, 37, 83);
	border-radius: 5px;
	margin-left: 80px;
}

#progressbar .ui-progressbar-value {
	height: 100%;
	background-color: rgb(47, 37, 83);
}

.progressbar-label {
	float: left;
	padding-top: 10px;
	color: rgb(47, 37, 83);
}

#complete {
	display: none;
}

#not-filled-in {
	display: block;
	border: solid 1px;
	border-radius: 5px;
	padding: 15px;
	color: white;
	background: rgb(47, 37, 83);
}

div#footer {
	margin-top: 50px;	
}

div#footer-loqui {
	/*small screens only */
	text-align: center;
	display: block;
}

div#footer-qwir {
	padding: 5px 20px;
	border-radius: 5px;
	font-size: 90%;

	/* small screens only */
	text-align: center;
	display: block;
}

	@media only screen and (min-width: 800px) {
		div#footer {
			text-align: justify;
		}

		div#footer:after {
					content: '';
					width: 100%; 
					display: inline-block;
		}

		div#footer-loqui {
			text-align: left;
			display: inline-block;
		}

		div#footer-qwir {
			text-align: right;
			display: inline-block;
		}
	}

div#footer a,
div#footer a:visited,
div#footer a:hover,
div#footer a:focus,
div#footer a:active {
	color: inherit;
}

div#footer a span.link-label {
	/* small screens only */
	display: block;
	margin-bottom: 10px;
}

div#footer span.filler {
	/* small screens only */
	display: none;
}


	@media only screen and (min-width: 800px) {
		div#footer a span.link-label {
			display: inline;
			margin-bottom: 0;
		}

		div#footer span.filler {
			display: inline;
		}
	}

div#footer p,
div#footer ul {
	margin-bottom: 0;
}

p#resultDisplay {
	text-align: center;
	margin-bottom: 50px;
}

span#result-level-label {
	display: block;
	font-size: 18px;
	text-align: center;
	margin-bottom: 30px;
}

span#result-level {
	display: inline-block;
	text-align: center;

	background: rgb(47, 37, 83);
	color: white;

	border-radius: 10px;
	padding: 20px;
	margin: 0 auto;

	word-break: break-all;

	/* small screens only */
	font-size: 70px;
}

	@media only screen and (min-width: 800px) {
		span#result-level {
			font-size: 100px;
		}

	}