@font-face {
    font-family: "LemonMilk";
	src:url(../fonts/LemonMilk.otf) format("opentype");
}

@font-face {
    font-family: "LemonMilkbold";
	font-weight: bold;
	src:url(../fonts/LemonMilkbold.otf) format("opentype");
}

@font-face {
    font-family: "LemonMilklight";
	font-weight: lighter;
	src:url(../fonts/LemonMilklight.otf) format("opentype");
}

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-family: serif;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html, body {
    background-color: #28272c;
    color: #e6e6e4;
    margin: 0;
	font-family: Arial, "Sans-Serif";
	font-size: 18px;
	line-height: 1.5em;
}
html, body {
    height: 100%;
	overflow-x: hidden !important;
}
*:focus {
	outline: none;
}

h2 {
	font-family: "LemonMilk", Arial, "Sans-Serif";
	letter-spacing: 1px;
	font-weight: bold;
	width: 100%;
	margin: 60px 0 10px;
	color: #d4b179;
	line-height: 1.5em;
}
h3.likeHeading2 { font-family: "LemonMilk", Arial, "Sans-Serif";
	letter-spacing: 1px;
	font-weight: bold;
	color: #d4b179;
	line-height: 1.5em;
	font-size: 22px;}

p {
	margin-bottom: 10px;
}
p span.highlight, h2 { font-family: "LemonMilk", Arial, "Sans-Serif"; font-size: 22px; font-weight: bold;color: #d4b179; letter-spacing: 1px; }
h2 a, h2 span { text-decoration: none; color: #aaa; }
h2 span { font-weight: normal; }
h2 a:hover { text-decoration: none; color: #d4b179; }
a { color: #e6e6e4; }
a:hover { text-decoration: none; }
strong { font-weight: bold; }
.center { text-align: center; }
.right { text-align: right; }
ul { margin-bottom: 10px; list-style-position: inside; }
ol { margin-bottom: 10px; margin-left: 19px; }
blockquote { font-style: italic; margin: 40px 80px; }
blockquote::before, blockquote::after { content: '"'; }
i { font-style: italic; }

#wrapper {
    position: relative;
    min-height: calc(100% - 135px);
    height: auto !important;
}
#footer {
    bottom: 0px;
    clear: both;
    padding: 50px 0 0;
    text-align: center;
    margin: 0 auto 10px auto;
    width: 100%;
    max-width: 760px;
}

#body {
    padding-bottom: 20px;
	margin: 0 auto;
	max-width: 800px;
}

/* Form Styles - General */
button, a.button {
	display: block;
	height: 74px;
	background: #d4b179;
	border: 4px solid #d4b179;
	font-size: 24px;
	width: 100%;
	font-family: "LemonMilk", Arial, "Sans-Serif";
	letter-spacing: 1px;
}
button:hover, a.button:hover {
	color: #e6e6e4;
	cursor: pointer;
}
button.disabled {
	background: #ccc;
	border-color: #ccc;
	color: #28272c;
	cursor: not-allowed;
}

a.button { text-align: center; color: #28272c; text-decoration: none; padding: 20px 0; height: auto; border: none; margin-bottom: 8px; }


/* Form Styles - Specific Forms */

/** Feedback Code Form **/
#feedbackCodeForm {
	margin-top: 25px;
}
#feedbackCodeForm button {
	width: 74px;
	margin-top: -10px;
	float: right;
	margin: 0;
	background: #d4b179 url('../img/btn_check_black.png') 8px 8px no-repeat;
	margin-bottom: 15px;
}
#feedbackCodeForm button:hover {
	background-image: url('../img/btn_check_white.png');
}
#feedbackCodeForm input {
	padding: 15px;
	font-size: 30px;
	color: #28272c;
	width: 62%;
	display: block;
	float: left;
	border: 4px solid #d4b179;
	text-align: center;
	margin-bottom: 15px;
	text-transform: uppercase;
}


#welcome_feedback h2, #welcome_facebook h2, .leftOrTop h2, .rightOrBottom h2 { text-align: center; }
#welcome_feedback, .rightOrBottom {
	width: 360px;
	margin: 0 20px;
	float: right;
}
#welcome_facebook, .leftOrTop {
	width: 360px;
	margin: 0 20px;
	float: left;
}

#feedbackForm textarea {
	width: 96%;
	height: 200px;
	font-family: Arial;
	font-size: 18px;
	padding: 2%;
	margin-bottom: 18px;
    border: 2px solid #d4b179;
    width: 766px;
}

#videotestForm label.finalAnswer {
    color: #d4b179;
    font-weight: bold;
}

#videotestForm label.dismissedAnswer { color: #aaa; }

#header {
	width: 320px;
	text-align: center;
	margin: 20px auto 0 auto;
}
#footer p { margin-bottom: 0; }
#footer ul { list-style: none; text-align: center; }
#footer li { display: inline; }
#footer li::after { content: " | "; }
#footer li:last-child::after { content: ""; }

ul.answers {
	list-style: none;
	width: auto;
}
ul.answers li { display: block; width: 17%; float: left; }
ul.answers li.middle { width: 10%; }
ul.answers li.spacer { width: 9%; }
ul.answers label { display: block; text-align: center; }
ul.answers input { width: 100%; }
ul.answers span { width: 100%; clear: both; display: none; margin-right: 5px; }



p.error { clear: both; text-align: center; color: #d4b179; font-family: "LemonMilklight", Arial, "Sans-Serif"; }
form p.error { width: calc(100% - 10px);
	min-width: 320px;
	max-width: 790px; margin: 0 auto; text-align: left; padding-top: 5px; }

table.question {
	width: 100%;
	margin-top: 60px;
}

table.question h2 {
	text-align: left;
}

table.question tr.legend td {
	color: #aaa;
	padding-bottom: 10px;
}

table.question tr.answer td {
	text-align: center;
}

table.question tr.answer td input {
	width: 20px !important;
	height: 20px !important;
}

table.summary_barcharts {
    float: left;
    width: 60%;
}

table.summary_barcharts div {
    height: 100%;
    background: #d4b179;
    margin: 1px 0 4px 10px;
    float: left;
}

table.summary_barcharts span { margin-left: 10px; }

div.summary_kpis { text-align: center; float:right; width: 20%; }
div.summary_kpis p.average { font-size: 50px; color: #d4b179; margin: 46px 0 20px 0; }

.messageBox {
	color: #d4b179;
	margin: 90px 100px 50px;
}

.messageBox h3 {
	font-family: "LemonMilk", Arial, "Sans-Serif";
	font-size: 24px;
	letter-spacing: 1px;
	margin: 0 0 10px 0;
	line-height: 1.5em;
}

h3 {
	font-weight: bold;
	margin: 60px 0 10px 0;
}

h4 {
	font-weight: bold;
	margin: 30px 0 10px 0;
}

h3 + h4 { margin-top: 0; }

table.admintable {
    width: 100%;
    margin-top: 50px;
	margin-bottom: 60px;
}

h3 + table.admintable {
	margin-top: 0;
}

p + table.admintable,
p + form {
	margin-top: 25px;
}

table.admintable td {
    padding: 5px;
    border-bottom: 1px solid #202020;
}

table.admintable tr:last-child td {
    border: none;
}

table.admintable th { font-weight: bold; font-style: italic; border-bottom: 1px solid #e6e6e4; }
table.admintable th.adminoptions-2 { width: 60px; }
table.admintable td.options a:hover i { color: #d4b179; }

ul.adminoptions { list-style-type: none; padding: 0; }

div.messagebox { margin: 25px 50px 0; color: #d4b179; padding: 25px; text-align: center; color: #d4b179; font-family: "LemonMilklight", Arial, "Sans-Serif"; }
div.messagebox p.title { font-weight: bold; }

#loginForm { width: 80%; margin: 0 auto; }
#loginForm label, #resetPasswordForm label, #addVideoForm label { clear: both; width: calc(100% - 10px);
	min-width: 320px;
	max-width: 790px; display: block; margin: 30px auto 0; }
#loginForm input, #resetPasswordForm input, #addVideoForm input { padding: 15px; color: #28272c; border: 2px solid #d4b179; font-size: 18px;  display: block;
	width: calc(100% - 34px);
	min-width: 300px;
	max-width: 770px; margin: 0; text-align: center; }
#loginForm input[type=checkbox] { display: inline; width: auto; margin: -2px 5px 0 0; height: 17px; }
#loginForm button, #resetPasswordForm button {
	width: 100%;
	min-width: 330px;
	max-width: 800px;
	height: 56px;
	background: #d4b179;
	border: 4px solid #d4b179;
	font-size: 24px;
	font-family: "LemonMilk", Arial, "Sans-Serif";
	letter-spacing: 1px;
    display: block;
    margin: 50px auto 10px;
}

#loginForm p { width: 100%;
	min-width: 330px;
	max-width: 800px; margin: 0 auto; }

#loginForm p.right { margin-bottom: 49px; }

#registrationForm { width: 80%; margin: 0 auto; }

#addVideoForm textarea { padding: 15px; color: #28272c; border: 2px solid #d4b179; font-size: 18px;  display: block;
    width: calc(100% - 34px);
    min-width: 300px;
    max-width: 770px; margin: 0; height: 200px; font-family: Arial, "Sans-Serif"; }

#addVideoForm span.invalid-feedback { display: block; }

form div.row label {
	clear: both;
	width: calc(100% - 10px);
	min-width: 320px;
	max-width: 790px;
	display: block;
	margin: 30px auto 0;
}
form div.row input {
	padding: 15px;
	color: #28272c;
	border: 2px solid #d4b179;
	font-size: 18px;
	display: block;
	width: calc(100% - 34px);
	min-width: 300px;
	max-width: 770px;
	margin: 0 auto;
	text-align: center;
}
#registrationForm_group div { float: left; width: 30%; }
#registrationForm_group div input[type='radio'] { width: 25px; min-width: 25px; float: left; margin: 16px 5px 30px 50px; }
#registrationForm_group #group_rastatt { margin-left: 100px; }
#registrationForm_group div label { clear: none; width: auto; margin: 10px 0 0 0; }
form ul.radio { padding-left: 0; display: flex; width: calc(100% - 50px); margin: 10px 0 0 50px; }
form ul.radio li { display: block; flex: 1 1 auto; list-style-type: none; }
form ul.radio label { min-width: auto; display: inline; }
form ul.radio input[type='radio'] { width: 25px; min-width: 25px; margin: 0; float: left; margin: 6px 5px 0 0; }
#registrationForm_group ul.radio #group_rastatt { margin-left: 0; }
form ul.tags { padding: 0; margin-top: 15px; }
form ul.tags li { list-style: none; display: inline-block; padding-bottom: 10px; margin-right: -5px; }
form ul.tags input[type='checkbox'] { width: 0; min-width: 0; margin: 0; display: inline; opacity: 0; }
form ul.tags input[type='checkbox'] + label { padding: 2px 12px; border: 1px solid #fff; border-radius: 12px; width: auto; min-width: 0; display: inline; margin-left: -2px; }
form ul.tags input[type='checkbox']:checked + label { background: #fff; color: #000; }

@media (max-width: 799px) {
	#registrationForm_group div { width: 150px; float: none; margin: 0 auto; clear: both; }
	#registrationForm_group div input[type='radio'] { margin: 11px 10px 0 0; padding: 10px; }
	#registrationForm_group #group_rastatt { margin-left: 0; }
	#registrationForm_group div label { padding-top: 10px; }
	#registrationForm_group #group_rastatt { margin-bottom: 30px; }
}


form div.row button {
	width: 100%;
	min-width: 330px;
	max-width: 800px;
	height: 56px;
	background: #d4b179;
	border: 4px solid #d4b179;
	font-size: 24px;
	font-family: "LemonMilk", Arial, "Sans-Serif";
	letter-spacing: 1px;
	display: block;
	margin: 50px auto 10px;
}


#addNewCourseForm {
    margin-top: 30px;
}
#addNewCourseForm input {
	padding: 15px;
    color: #28272c;
    border: 2px solid #d4b179;
    font-size: 18px;
    display: block;
    width: 360px;
    margin: 0 auto;
    text-align: center;
}
#addNewCourseForm button {
    width: 394px;
	height: 74px;
	background: #d4b179;
	border: 4px solid #d4b179;
	font-size: 24px;
	font-family: "LemonMilk", Arial, "Sans-Serif";
	letter-spacing: 1px;
    display: block;
    margin: 20px auto 10px;
}
#addNewCourseForm button:hover {
	color: #e6e6e4;
	cursor: pointer;
}

dl.faq dt { font-weight: bold; color: #d4b179; padding-top: 30px; }
dl.faq dt:first-child { padding-top: 20px; }

ul.downloads, ul.links { list-style: none; padding-left: 0; }
ul.downloads h3, ul.links h3 { margin-top: 0; color: #d4b179; margin-top: 30px; }
ul.downloads ul, ul.links ul { list-style-type: disc; }

ul { list-style-position: outside; padding-left: 16px; }

ul.domains { list-style: none; padding-left: 0; }
ul.domains li i, ul.downloads li i,
ul.links li i, ul.links li i{ display: block; float: left; font-size: 40px; margin-top: 6px; color: #d4b179; }
ul.downloads li i,
ul.links li i  { margin-left: 15px; }
ul.domains li p, ul.downloads li p, ul.links li p { margin: 0 0 30px 60px; }

@media only screen and (max-width: 540px) {
	#loginForm, #registrationForm { width: 100%; margin: 0; }
}

div.excercise { clear: both; padding-top: 50px; }
h3.likeHeading2 + div.excercise { padding-top: 0; }
div.excercise div.answeroptions { float: left; width: 30%; padding-right: 5%; }
div.excercise div.answeroptions:nth-child(5) { padding-right: 0; }
div.excercise h3 { margin-top: 0; }
div.excercise h4 { font-weight: bold; margin-top: 10px; }
form.knowledge-excercise button { margin-top: 50px; }
p.incorrect span { color: red; font-weight: bold; }
p.correct span { color: green; font-weight: bold; }

p.videocomment_toggle { display: none; }
div.video { margin-top: 100px; }
p + div.video { margin-top: 50px; }
div.video h4 { margin-top: 0; padding-top: 0; }
#video-admin-stats { text-align: right; margin-bottom: 20px; color: #aaa; }
#video-admin-stats a { color: #aaa; margin: 0 3px 0 20px; display: inline-block; padding-bottom: -10px; }
#video-admin-stats a:hover { color: #d4b179; }
dl.video-admin-stats_answers { margin-bottom: 50px; }
dl.video-admin-stats_answers dt { display: block; clear: both; -webkit-transition:all 500ms ease-out 0.5s;
    -moz-transition:all 500ms ease-out 0.5s;
    -o-transition:all 500ms ease-out 0.5s;
    transition:all 500ms ease-out 0.5s; }
dl.video-admin-stats_answers dd { height: 30px; }
dl.video-admin-stats_answers div { height: 30px; line-height: 30px; -webkit-transition:all 500ms ease-out 0.5s;
    -moz-transition:all 500ms ease-out 0.5s;
    -o-transition:all 500ms ease-out 0.5s;
    transition:all 500ms ease-out 0.5s; }
dl.video-admin-stats_answers div.text { text-align: right; width: 55px; border-right: 5px solid #aaa; padding-right: 5px; float: left; }
dl.video-admin-stats_answers dd.correct-answer div.text { color: #d4b179; border-color: #d4b179; }
dl.video-admin-stats_answers div.bar { background-color: #aaaaaa; margin-bottom: 20px; float: left; width: auto; }
dl.video-admin-stats_answers dd.correct-answer div.bar { background-color: #d4b179; }
dl.video-admin-stats_answers dt.correct-answer { color: #d4b179; }

.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

@media (max-width: 820px) {
	#body { width: auto; margin: 0 20px; }
	#welcome_feedback, #welcome_facebook { width: 400px; float: none; margin: 0 auto; }
	#welcome_facebook { clear: both; padding-top: 10px; }
	#footer { width: auto; margin: 60px 20px 25px 20px; }
	#footer span { display: block; }
	#footer p { margin-bottom: 10px; }
	ul.answers li.spacer { display: none; }
	ul.answers { margin: 0 20%; }
	ul.answers li, ul.answers li.middle { width: 100%; margin-bottom: 10px; float: none; }
	ul.answers label { text-align: left; }
	ul.answers li.moreInfo label:after { content: ")"; }
	ul.answers li.moreInfo span:after { content: " ("; }
	ul.answers input { width: auto; }
	ul.answers span { display: inline; width: auto; margin-right: 0; }
	textarea { width: 93% !important; padding: 3% !important; }
	input[type=checkbox] {
		-ms-transform: scale(1); /* IE */
		-moz-transform: scale(1); /* FF */
		-webkit-transform: scale(1); /* Safari and Chrome */
		-o-transform: scale(1); /* Opera */
	}
	div.excercise div.answeroptions { width: 50%; padding: 0; }
}
@media (max-width: 550px) {
	div.excercise div.answeroptions { width: 100%; padding: 0; }
	div.excercise h4 { margin-top: 20px; }
	form p + div.excercise h4 { margin-top: 10px; }
}

@media (max-width: 440px) {
	#welcome_feedback, #welcome_facebook { width: 100%; float: none; margin: 0; }
	#welcome_feedback { padding-top: 35px; }
	#welcome_facebook { clear: both; padding-top: 50px; }
	#footer { width: auto; margin-left: auto; margin-right: auto; }
}

@media (max-width: 320px) {
	#feedbackCodeForm input { width: 160px; }
}

table.selfassessment { width: calc(100%); margin-top: 0; }
table.selfassessment th { border-bottom: 1px solid #fff; }
form table.selfassessment th { border-bottom: none; }
table.selfassessment th:nth-child(1) { width: 95px; padding-right: 5px; }
table.selfassessment textarea { padding: 5px; font-family: Arial, "Sans-Serif"; font-size: 18px; line-height: 1.5em; resize: none; }
table.selfassessment tr td:nth-child(1) textarea { width: calc(100% - 5px); }
table.selfassessment tr td:nth-child(2) textarea { width: 100%; }

table.selfassessment-summary { width: 100%; }
table.selfassessment-summary tr td:nth-child(1) { width: 239px; padding-right: 22px; text-align: right; font-weight: bold; }

form.selfassessment { width: 100%; }
form.selfassessment label { display: block; width: 219px; text-align: right; float: left; padding: 1px 22px 0 0; }
form.selfassessment label.mandatory { padding-right: 10px; width: 230px; }
form.selfassessment label.mandatory:after { content: " *"; color: #d4b179; }
form.selfassessment div input { float: left; font-size: 16px; font-family: Arial, "Sans-Serif"; }
form.selfassessment div input#referee { width: calc(100% - 260px); }
form.selfassessment div input#match_number,
form.selfassessment div input#match_competition,
form.selfassessment div input#match_date,
form.selfassessment div input#club_host,
form.selfassessment div input#club_guest,
form.selfassessment div input#referee_assistent_1,
form.selfassessment div input#referee_assistent_2,
form.selfassessment div input#referee_coach { width: calc((100% - 337px)/2); }
form.selfassessment div span { display: block; float: left; width: 65px; text-align: center; }
form.selfassessment div { width: 100%; height: 40px; }
form.selfassessment input[type='checkbox'] { margin: 7px 5px 0 10px; }
form.selfassessment input[type='checkbox'] + label { text-align: center; width: auto; }
form.selfassessment table.grades { width: 100%; text-align: center; }
form.selfassessment table.grades thead th { width: calc(100%/7); }
form.selfassessment table.grades label { text-align: center; width: 100%; }
form.selfassessment textarea,
form.selfassessment input { background: #aaa; border: 1px solid #fff; padding: 5px; font-size: 18px; }
form.selfassessment textarea:focus,
form.selfassessment input:focus{ background: #fff; }

p.selfassessment-no-situations { text-align: center; font-style: italic; }

table.selfassessment textarea { padding: 5px; box-sizing: border-box;
	height: 36px;
	min-height: 36px;
	overflow: hidden;
	font-size: 16px;
}