@font-face {
    font-family: UHH;
    src: url("font/TheSansUHH_Regular.ttf");
}
@font-face {
    font-family: UHH;
    src: url("font/TheSansUHH_Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: UHH;
    src: url("font/TheSansUHH_Regular_Italic.ttf");
    font-style: italic;
}
@font-face {
    font-family: UHH;
    src: url("font/TheSansUHH_Bold_Italic_0.ttf");
    font-weight: bold;
    font-style: italic;
}


body {
	line-height: 1.5;
	font-family: "UHH", Arial;
    font-style: regular;
	background: #05111f; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #05111f 0%, #1c193b 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#05111f), color-stop(100%,#1c193b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg,  #05111f 0%,#1c193b 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg,  #05111f 0%,#1c193b 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg,  #05111f 0%,#1c193b 100%); /* IE10+ */
	background: linear-gradient(135deg,  #05111f 0%,#1c193b 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05111f', endColorstr='#1c193b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.question-span {
  display: inline-block;
  vertical-align: middle;
}

.fachnummer {
text-decoration: underline;
}

#main-area {
	max-width: 1500px;
	background-color:white;
	margin: auto;
	padding:10px;
}

#header-profale {
	float:right;
	padding-top:10px;
	padding-right:10px;
}

#content-area {
	min-height: 550px;
	margin:auto;
	padding-top:30px;
	display: flex;
}

#text-area {
	margin:20px;
}

#video {
	width:100%;
}

#video-area {
	border-left: solid;
	border-width:4px;
	border-color:#05111f;
	width:150%;
	flex-direction:column;
	padding:20px;
}

#bottom-area {
	justify-content: space-between;
}

#debugOut {
	color:white;
}

.centered {
	text-align:center;
}

.box {
  display: flex;
}
.left {
  flex: 0 0 50%;
}
.right {
  flex: 1;
}

#button-area {
	float:right;
	margin-right:29px;
}

.centerpic {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.button {
    background-color: white;
    color: black;
    border: 2px solid black;
    width:100px;
    height:40px;
    font-size:15pt;
}
.button-dis {
    background-color: white;
    color: grey;
    border: 2px solid Gainsboro;
	width:100px;
	height:40px;
	font-size:15pt;
}

#video-button-area {
	flex-direction:row;
	padding-top:20px;
	display:flex;
}

.boxed {
	outline: 1px solid black;
	padding:20px;
	margin:20px;
}

.spaced {
	margin:10px;
}

.spaced-right {
	float:right;
}

.notes {

	background-image: -webkit-linear-gradient(left, white 0px, transparent 10px), -webkit-linear-gradient(right, white 0px, transparent 10px), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
	background-image: -moz-linear-gradient(left, white 0px, transparent 10px), -moz-linear-gradient(right, white 0px, transparent 10px), -moz-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
	background-image: -ms-linear-gradient(left, white 0px, transparent 10px), -ms-linear-gradient(right, white 0px, transparent 10px), -ms-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
	background-image: -o-linear-gradient(left, white 0px, transparent 10px), -o-linear-gradient(right, white 0px, transparent 10px), -o-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
	background-image: linear-gradient(left, white 0px, transparent 10px), linear-gradient(right, white 0px, transparent 10px), linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
	background-size: 100% 100%, 100% 100%, 100% 31px;
	border:none;
	line-height: 31px;
	padding: 8px;
	width:90%;
	max-width:500px;
	min-height:124px;
	max-height:100px;
	background-attachment: scroll;
}

.notes-big{
	background-image: -webkit-linear-gradient(left, white 0px, transparent 10px), -webkit-linear-gradient(right, white 0px, transparent 10px), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
	background-image: -moz-linear-gradient(left, white 0px, transparent 10px), -moz-linear-gradient(right, white 0px, transparent 10px), -moz-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
	background-image: -ms-linear-gradient(left, white 0px, transparent 10px), -ms-linear-gradient(right, white 0px, transparent 10px), -ms-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
	background-image: -o-linear-gradient(left, white 0px, transparent 10px), -o-linear-gradient(right, white 0px, transparent 10px), -o-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
	background-image: linear-gradient(left, white 0px, transparent 10px), linear-gradient(right, white 0px, transparent 10px), linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
	background-size: 100% 100%, 100% 100%, 100% 31px;
	border:none;
	line-height: 31px;
	font-family: Arial, Helvetica, Sans-serif;
	padding: 8px;
	width:90%;
	max-width:500px;
	min-height:300px;
	max-height:300px;
}