@charset "utf-8";

/* Colorsettings, Fontsettings*/
body{
	font-family:Arial, Helvetica, sans-serif;
    font-size: 14px;
}

a:link,
a:visited
{
	font-weight:normal;
	text-decoration:none;
	color:#179dda;
}

a:hover{
	color:#999999;
}

#forward, 
#forward a:link, 
#forward a:visited, 
#forward a:hover
{
	font-size: 16px;
	color: #179dda;
	font-weight: bold;
}

#version,
#version a:link,
#version a:visited
{
	font-weight:normal;
	color:#ffffff;
}

.clear{
    clear: both;
    font-size: 1px;  
}

.clearmessage{
    clear: both;
    font-size: 15px;
    font-weight: bold;
    display: none;  
}

h1{
	font-weight:bold;
	font-size:20px;
	color:#179dda;
}

h2{
	font-weight:bold;
	font-size:16px;
	color:#179dda;
}

h3{
	margin-top:12px;
	margin-bottom:18px;
	font-weight:bold;
	font-size:14px;
	color:#179dda;
	border-bottom: 1px solid #179dda;
}

h4{
	font-size:16px;
/*	color:#179dda;  */
	margin-bottom:12px;
}
table tr {
    height: 25px;
}

#main{
	clear:both;
	height:456px;
	overflow:hidden;
	line-height:1.2;
	color:#2a2b2a;
	/*margin-bottom:20px;*/
}

/*================= Layoutsettings ===========================================*/

#container{
	position:absolute;
	width:1024px;
	height:670px; 
	margin:-335px 0px 0px -512px;
	top: 50%; 
	left: 50%;
}

.zentriertebox{
	position:absolute;
	width:1024px;
	height:40px; 
	/*margin:-20px 0px 0px -512px;*/
    margin: auto;
	top: 50%; 
	left: 50%;
}

#header{
	height: 44px;
	background:url("/Content/header_bg.png") repeat-x;
}
#header h1,#header h2{
	color:#fff;
	margin:0;
	line-height: 1.2;
}
#header h1{
	font-size:18px;
	font-weight:bold;
	margin-top:3px;
}
#header h2{
	font-size:14px;
}

#titel{
	float:left;
	padding-left:10px;
	width:31%;
}
#titel2{
	float:left;
	padding-left:10px;
	width:70%;
}
#seitenzahl{
	float:right;
	margin-right:10px;
	width:20%;
    text-align: right;
}
#firstlastname{
    float: left;
	width:40%;
    text-align: center;
    white-space: nowrap;
}
#subheader{
	height: 100px;
	background:url("/Content/head_bg.jpg") no-repeat;
}
#subheaderimage {
    text-align: center;
    float: left;
}
#help{
	height:43px;
	overflow:hidden;
	float:right;
	text-align:right;
	margin-top:35px;
}
#uhr {
    color: #AAAAAA;
    float: left;
    font-size: 10px;
    font-weight: bold;
    line-height: 43px;
    padding-right: 200px;
}
#notimelimit {
    color: #179DDA;
    float: left;
    font-size: 26px;
    font-weight: bold;
    line-height: 43px;
    padding-right: 100px;
}
#help ul{
	margin:0;
	padding:0;
	display:inline-block;
}
#help ul li{
    float:right;
    list-style:none;
    margin:0;
    padding-right:10px;
    width:35px;
}
#help ul li img{
	cursor:pointer;
}

#leftcol{
    float: left;
    padding: 0 10px;
    width: 660px;
	color: #2A2B2A;
}
#rightcol{
    float: right;
    padding: 0 20px;
    width: 250px;
	height:100%;
	border-left: 1px dotted #0292D1;
	color: #2A2B2A;
}

#footer{
	height: 50px;
	background:url("/Content/footer_bg.png") repeat-x;
}
#footer .leftalign{
	width: 120px;
	float:left;
    height: 20px;
	margin-left:10px;
}
#footer .rightalign{
	width: 120px;
	float:left;
	text-align:right;
    height: 20px;
	margin-right:10px;
}
#footer .centeralign{
	width: 764px;
	text-align:center;
	float:left;
    height: 20px;
    line-height: 15px;
}
.button1,.button1:link,.button1:visited{
	text-transform:uppercase;
	color: #179DDA;
    font-size: 16px;
    font-weight: bold;
	text-decoration:none;
}

.button1:disabled {
    color: #B0D3E5 !important; 
}

.button2:link,.button2:visited{
	color:#179DDA;
    font-size:12px;
    font-weight:bold;
	text-decoration:none;
	width:15px;
	height:15px;
	text-align:center;
	display:inline-block;
}
.button2:hover,.button2:active,.solved{
	color:#fff;
	background:url("/Content/button2_bg.png") no-repeat;
}

#copyright{
    color: #2a2b2a;
    font-size: 11px;
    clear:both;
	height:20px;
    padding-top: 3px;
	/*padding-left: 10px;*/
}

#version{
    color: #2a2b2a;
    font-size: 11px;
    float: right;
    clear:both;
	height:20px;
    /*padding-top: 3px;*/
	/*padding-left: 10px;*/
}

/*===== Content-Boxen innerhalb "main" ======================================================*/
.w300{
	width:300px;
	margin:0 auto;
}
.w400{
	width:400px;
	margin:0 auto;
}
.w500{
	width:500px;
	margin:0 auto;
}
.w550{
	width:550px;
	margin:0 auto;
}
.w600{
	width:600px;
	margin:0 auto;
}
.w650{
	width:650px;
	margin:0 auto;
}
.w700{
	width:700px;
	margin:0 auto;
}
.w750{
	width:750px;
	margin:0 auto;
}
.w800{
	width:800px;
	margin:0 auto;
}
.w900{
	width:900px;
	margin:0 auto;
}
.w1000{
	width:1000px;
	margin:0 auto;
}

.v300{
	width:300px;
	margin:0 auto;
}
.v400{
	width:400px;
	margin:0 auto;
}
.v500{
	width:500px;
	margin:0 auto;
}
.v550{
	width:550px;
	margin:0 auto;
}
.v600{
	width:600px;
	margin:0 auto;
}
.v650{
	width:650px;
	margin:0 auto;
}
.v700{
	width:700px;
	margin:0 auto;
}
.v750{
	width:750px;
	margin:0 auto;
}
.v800{
	width:800px;
	margin:0 auto;
}
.v900{
	width:900px;
	margin:0 auto;
}

.v1000{
	width:1000px;
	margin:0 auto;
}

.centered{
	text-align:center;
}

.centeredByFlex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.letterbox {
    float: left;
    font-size: 26px;
    font-weight: bold;
    height: 37px;
    line-height: 30px;
    margin-right: 10px;
    padding-left: 5px;
    width: 37px;
}


ul.moduluebersicht{
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 250px;
}

ul.testuebersicht {
    margin: 0 auto;
    padding: 0;
    text-align: left;
    position: relative;
}

ul.testuebersicht.w-40 {
    width: 40%;
}

ul.testuebersicht:after {
    content: '';
    left: 0;
    top: 0;
    bottom: 0;
    right: 20%;
    background: white;
    position: absolute;
    transition: ease top .3s;
}

ul.testuebersicht.hide-overlay:after {
    top: 100%;
}

ul.testuebersicht li {
    clear: both;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
}

ul.testuebersicht li img{
    float: left;
    cursor: pointer;
    width: 30px;
    padding-right: 5px;
}

ul.testuebersichtr {
    margin: 0 auto;
    padding: 0;
    text-align: left;
}

ul.testuebersichtr li {
    clear: both;
    font-size: 14px;
    height: 35px;
    line-height: 30px;
}

ul.testuebersichtr li img{
    float: left;
    cursor: pointer;
    width: 30px;
    padding-right: 5px;
}


ul.pauseuebersicht {
    margin: 0 auto;
    padding: 0;
    text-align: left;
    width: 640px;
}

ul.pauseuebersicht li {
    clear: both;
    font-size: 14px;
    height: 40px;
    line-height: 30px;
}

ul.pauseuebersicht li img{
    float: left;
    cursor: pointer;
    width: 30px;
    padding-right: 5px;
}

ul.pauseuebersichtr {
    margin: 0 auto;
    padding: 0;
    text-align: left;
    width: 250px;
}

ul.pauseuebersichtr li {
    clear: both;
    font-size: 14px;
    height: 40px;
    line-height: 30px;
}

ul.pauseuebersichtr li img{
    float: left;
    cursor: pointer;
    width: 30px;
    padding-right: 5px;
}


ul.question {
    /*margin: 0 auto;*/
    padding: 0;
    text-align: left;

}

ul.question li {
    clear: both;
    font-size: 14px;
    height: 45px;
    line-height: 16px;
}

ul.question li img{
    float: left;
    cursor: pointer;
    padding-right: 5px;
    width: 30px;
}



ul.checkboxen{
    margin: 0 auto;
    padding: 0;
    text-align: left;
    width: 700px;
}

#main p{
	font-size:14px;
	color:#2a2b2a;
}


/*================ unbekannte Styles.. ==================================*/

#main .inside
{
	padding:0;
	margin: 20px 100px 0 209px;
}

#main .insidereg
{
	padding-top:35px;
    float: left;
    width: 700px;
    padding-left: 200px;
}

#main .insidelog
{
	padding-top:35px;
    float: left;
    width: 700px;
    padding-left: 200px;
}

#MessageR
{
    float: left;
}

#btnlogin
{
    float: right;
    margin-right: 40px;
}

#right .inside
{
	padding:0;
}

#forward
{
	margin-left: 762px;
	margin-top: -20px;
}

#finish
{
	background-image:url("/Content/footer_bg.jpg");
	background-repeat:repeat-x;
	height: 15px;
}




#right li,
#Message li
{
	margin-bottom:5px;
	margin-left:30px;
	padding:0;
	line-height:1.5;
	list-style-image:url("/Content/li_ok.gif");
}

#main  li.error,
#Message li.error
{
	margin-bottom:5px;
	margin-left:30px;
    padding: 0;
    font-weight: bold;
	line-height:100%;
	list-style-image:url("/Content/li_ausrufe_gelbdreieck_60.gif");
}
	
#main li.last
{
	width:300px;
	float:left;
	margin:0;
	padding:5px 0 0 0;
	list-style:none;
}

#btn,
#btnback,
#btndialog,
#btndialognew,
#btn a:link, 
#btn a:visited, 
#btn a:hover
{
    background: transparent;
    border: 0px;
    margin: 0 auto;
	font-size: 18px;
	color: #179dda;
	font-weight: bold;
    cursor: pointer;
}


#btndistance,
#btnbackdistance
{
    background: transparent;
    border: 0px;
    margin: 0 auto;
	font-size: 14px;
}

#btnV,
#btnV a:link, 
#btnV a:visited, 
#btnV a:hover
{
    background-color: #09B2E6;
    color: #ffffff;
	font-size: 16px;
	font-weight: bold;
}


.editor-field
{
    width: 250px;
    height: auto;
    font-size: 1em;
    padding: 2px;
}

.city-field
{
    width: 190px;
    height: auto;
    font-size: 1em;
    padding: 2px;
}

.zip-field
{
    width: 40px;
    height: auto;
    font-size: 1em;
    padding: 2px;
}

#symbol
{
	float:left;
}
	
#symboltext
{
	margin-left:30px;
    font-weight: bold;
}

.usertable tr td
{
    padding: 3px;
    border: 0px;
}

#uereschrift
{
      -moz-transform: rotate(-55deg);
}

.tooltip {
	display:inherit;
	background:transparent url("/Content/white_arrow.png");
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:#fff;	
}
	
#birthdayinfo img {
	border:0;
	margin:0 8px;
}

#informationsign
{
    vertical-align: text-bottom;
    height: 25px;
    width: 25px;
}

#Language
{
    margin-top: 180px;
    text-align: center;
}

#Language-Field
{
    text-align: center;
}

#absatz
{
    display: inline-block;
    text-align: center;
    margin-left: 220px;
}

.spaceinput
{
    border: none;
    font-size: 14px;
    width: 600px;
}

.numberinput
{
    font-size: 14px;
    width: 60px;
}

.numberinputhide
{
    font-size: 14px;
    width: 0px;
    border: none;
    height: 0px;
}

.textinput
{
    font-size: 14px;
    width: 60px;
}

.pagenr,.pagenr:link,.pagenr:visited{
	color:#179DDA;
    font-size:12px;
    font-weight:bold;
	text-decoration:none;
	width:17px;
	height:15px;
	text-align:center;
	display:inline-block;
    border: none;
    background-color: white;
}
.pagenr:hover,.pagenr:active,.solved{
	color:#fff;
    border: none;
	background:url("/Content/button2_bg.png") no-repeat;
}

.pagenr:hover,.pagenr:active,.active{
	color:#fff;
    border: none;
	background:url("/Content/button2_bg_rot.png") no-repeat;
}

.pagenr:disabled {
    color: #B0D3E5 !important; 
}
/*--- Style for Tecnical Unterstanding  Aufgabe 1---*/

img{border:none}
#aufgabe {
    display: block;
    height: 250px;
    position: relative;
    width: 280px;
	margin:0 auto;
}

#abs1{
	z-index: 1;
	position: absolute;
	left: 0px;
	top: 0px;
}
	
#abs2{
	z-index: 2;
	position: absolute;
	left: 85px;
	top: 77px;
}
#schalter_1{
	z-index: 4;
	position: absolute;
	left: 100px;
	top: 150px;
}
	
#abs3{
	z-index: 3;
	position: absolute;
	left: 147px;
	top: 77px;
}
#schalter_2{
	z-index: 6;
	position: absolute;
	left: 195px;
	top: 213px;
}

.ui-dialog-title {
    display: block;
    height: 20px;
    line-height: 20px;
    margin: 0 auto;
    text-align: left;
    width: 450px;
	cursor:move;
	font-family:  Arial, Sans-Serif; 
	font-size: 14px; 
	font-weight:bold;
}

.alerttitle {
    padding-top: 20px; 
    margin:0 7px 20px 0;    
    font-family:  Arial, Sans-Serif; 
    font-size: 20px; 
    font-weight:bold;
}

.alerttext {
    font-family:  Arial, Sans-Serif; 
    font-size: 20px; 
    font-weight: bold;
    }

.dialogtitle {
    padding-top: 20px; 
    margin:0 7px 20px 0;    
    font-family:  Arial, Sans-Serif; 
    font-size: 20px; 
    font-weight:bold;
    display: none;
}

.dialogtext {
    float:left;
    clear: left; /*IE7*/
    margin:0 7px 20px 0;    
    font-family:  Arial, Sans-Serif; 
    font-size: 12px; 
    font-weight:bold;
    }

.content-active {
	font-weight:bold;
	font-size:14px;
	color:#179dda;
}

.content-inactive {
	font-size:14px;
	color:#179dda;
}

.content-breakactive {
	font-weight:bold;
	font-size:14px;
	color:#179dda;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 20px;
}

.content-breakinactive {
	font-size:14px;
	color:#179dda;
    margin-top: 10px;
    margin-bottom: 10px;
}

/*--- Style f�r Tecnical Unterstanding  Aufgabe 2 ---*/

.disablecopypaste
{
    width: 250px;
    height: auto;
    font-size: 1em;
    padding: 2px;
}

.ui-dialog-titlebar-close
{
    display: inline;
}

.ui-dialog
{
    z-index: 100 !important;
}

.alphabet {
    text-align: center;
    padding-top: 150px;
}

.alphabetF {
    text-align: center;
    padding-top: 285px;
}

.lbexalpha {
    text-align: center;
    padding-top: 135px;
}

.lbalpha {
    text-align: center;
    padding-top: 85px;
}

.fgadvice {
    text-align: center;
    padding-top: 85px;
}

.center {
    margin: 0 auto;
    text-align: center;
}

#footer .rightalign {
    width: 100px;
}

#mempics-example {
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 20px;
}

    #mempics-example td {
        border: 2px solid grey;
        cursor: pointer;
    }

#mempics, #selectnumbers, #words {
	margin: 0 auto;
    border: 2px solid grey;
    border-collapse: collapse;
}

#mempics td, #selectnumbers td, #words td {
     border-top: 2px solid grey;
     border-left: 2px solid grey;
     cursor: pointer;
}

    #mempics-example td.selected, #mempics td.selected {
     border: 4px solid red;
    }

#selectnumbers td.selected, #words td.selected {
     border: 4px solid red;
     background-color: lightpink;
}

#mempics td img {
    height: 80px;
}

#lernteil {
    margin: 0 auto;
    text-align: center;
}

#lernteil img {
    height: 450px;   
}

#selectnumbers td {
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
}

.allimgs {
    margin: 0 auto;
    width: 800px;
    clear: both;
}

.labeldrop, .imgcontainer, .placeholder {
    width: 113px;
    height: 68px;
    float: left;
    border: 1px solid black;
}

.labeldrop {
    margin-bottom: 10px;
    margin-right: 10px;
}

.placeholder {
    background-color: lightgrey;
    margin-right: 50px;
}

.placeholder span {
    background:#fff; 
    padding:5px; 
    display:block;
}

.placeholderZ_de {
    margin-right: 50px;
    width: 200px;
    height: 172px;
    float: left;
    position: absolute;
    top: 500px;
    left: 390px;
    background: url("/Content/Grafik/gateway.one_logo_byline_pos_rgb.jpg");
    background-repeat:no-repeat;
    /*background-position:0px 50%;*/
    background-size: 200px;
}

.placeholderZ_fr {
    margin-right: 50px;
    width: 200px;
    height: 172px;
    float: left;
    position: absolute;
    top: 470px;
    left: 390px;
    background: url("/Content/Grafik/gateway.one_logo_byline_pos_rgb.jpg");
    background-repeat:no-repeat;
    background-position:0px 50%;
    background-size: 200px;
}

.placeholderZ_it {
    margin-right: 50px;
    width: 270px;
    height: 172px;
    float: left;
    position: absolute;
    top: 410px;
    left: 390px;
    background: url("/Content/Grafik/gateway.one_logo_byline_pos_rgb.jpg");
    background-repeat:no-repeat;
    background-position:0px 50%;
    background-size: 270px;
}

.placeholder1 {
    margin-right: 50px;
    width: 270px;
    height: 172px;
    float: left;
    border: 1px solid black;
    position: absolute;
    top: 180px;
    left: 30px;
    background: url("@Html.Raw(Model.ElementUrlBeforeAction[i])");
    background-repeat:no-repeat;
    background-position:0px 50%;
    background-size: 270px;
}



.placeholder2 {
    margin-right: 50px;
    width: 270px;
    height: 172px;
    float: left;
    border: 1px solid black;
    position: absolute;
    top: 180px;
    left: 309px;
    background: url("/Content/Grafik/begriffe_02.jpg");
    background-repeat:no-repeat;
    background-position:0px 50%;
    background-size: 270px;
}



.placeholder3 {
    margin-right: 50px;
    width: 270px;
    height: 172px;
    float: left;
    border: 1px solid black;
    position: absolute;
    top: 180px;
    left: 588px;
    background: url("/Content/Grafik/begriffe_03.jpg");
    background-repeat:no-repeat;
    background-position:0px 50%;
    background-size: 270px;
}



.placeholder4 {
    margin-right: 50px;
    width: 270px;
    height: 172px;
    float: left;
    border: 1px solid black;
    position: absolute;
    top: 388px;
    left: 30px;
    background: url("/Content/Grafik/begriffe_04.jpg");
    background-repeat:no-repeat;
    background-position:0px 50%;
    background-size: 270px;
}



.placeholder5 {
    margin-right: 50px;
    width: 270px;
    height: 172px;
    float: left;
    border: 1px solid black;
    position: absolute;
    top: 388px;
    left: 309px;
    background: url("/Content/Grafik/begriffe_05.jpg");
    background-repeat:no-repeat;
    background-position:0px 50%;
    background-size: 270px;
}



.placeholder6 {
    margin-right: 50px;
    width: 270px;
    height: 172px;
    float: left;
    border: 1px solid black;
    position: absolute;
    top: 388px;
    left: 588px;
    background: url("/Content/Grafik/begriffe_06.jpg");
    background-repeat:no-repeat;
    background-position:0px 50%;
    background-size: 270px;
}


.placeholder7 {
    margin-right: 50px;
    width: 145px;
    height: 130px;
    float: left;
    position: absolute;
    top: 180px;
    left: 30px;
    background: url("/Content/Grafik/farbe_01.jpg");
    background-repeat:no-repeat;
    background-position:4px 50%;
    background-size: 109px;
}

.placeholder8 {
    margin-right: 50px;
    width: 145px;
    height: 130px;
    float: left;
    position: absolute;
    top: 180px;
    left: 230px;
    background: url("/Content/Grafik/farbe_02.jpg");
    background-repeat:no-repeat;
    background-position:4px 50%;
    background-size: 109px;
}

.placeholder9 {
    margin-right: 50px;
    width: 145px;
    height: 130px;
    float: left;
    position: absolute;
    top: 180px;
    left: 430px;
    background: url("/Content/Grafik/farbe_03.jpg");
    background-repeat:no-repeat;
    background-position:4px 50%;
    background-size: 109px;
}

.placeholder10 {
    margin-right: 50px;
    width: 145px;
    height: 130px;
    float: left;
    position: absolute;
    top: 180px;
    left: 630px;
    background: url("/Content/Grafik/farbe_05.jpg");
    background-repeat:no-repeat;
    background-position:4px 50%;
    background-size: 109px;
}

.placeholder19 {
    margin-right: 50px;
    width: 145px;
    height: 130px;
    float: left;
    position: absolute;
    top: 180px;
    left: 430px;
    background: url("/Content/Grafik/farbe_07.jpg");
    background-repeat:no-repeat;
    background-position:4px 50%;
    background-size: 109px;
}

.placeholder11 {
    margin-right: 50px;
    width: 145px;
    height: 130px;
    float: left;
    /*border: 1px solid black;*/
    position: absolute;
    top: 315px;
    left: 30px;
    background: url("/Content/Grafik/farbe_08.jpg");
    background-repeat:no-repeat;
    background-position:4px 50%;
    background-size: 109px;
}

.placeholder12 {
    margin-right: 50px;
    width: 145px;
    height: 130px;
    float: left;
    /*border: 1px solid black;*/
    position: absolute;
    top: 315px;
    left: 230px;
    background: url("/Content/Grafik/farbe_09.jpg");
    background-repeat:no-repeat;
    background-position:4px 50%;
    background-size: 109px;
}

.placeholder13 {
    margin-right: 50px;
    width: 145px;
    height: 130px;
    float: left;
    /*border: 1px solid black;*/
    position: absolute;
    top: 315px;
    left: 430px;
    background: url("/Content/Grafik/farbe_10.jpg");
    background-repeat:no-repeat;
    background-position:4px 50%;
    background-size: 109px;
}

.placeholder14 {
    margin-right: 50px;
    width: 145px;
    height: 130px;
    float: left;
    /*border: 1px solid black;*/
    position: absolute;
    top: 315px;
    left: 630px;
    background: url("/Content/Grafik/farbe_11.jpg");
    background-repeat:no-repeat;
    background-position:4px 50%;
    background-size: 109px;
}

.placeholder15 {
    margin-right: 50px;
    width: 145px;
    height: 130px;
    float: left;
    position: absolute;
    top: 455px;
    left: 30px;
    background: url("/Content/Grafik/farbe_09.jpg");
    background-repeat:no-repeat;
    background-position:4px 50%;
    background-size: 109px;
}

.placeholder16 {
    margin-right: 50px;
    width: 145px;
    height: 130px;
    float: left;
    position: absolute;
    top: 455px;
    left: 230px;
    background: url("/Content/Grafik/farbe_10.jpg");
    background-repeat:no-repeat;
    background-position:4px 50%;
    background-size: 109px;
}

.placeholder17 {
    margin-right: 50px;
    width: 145px;
    height: 130px;
    float: left;
    position: absolute;
    top: 455px;
    left: 430px;
    background: url("/Content/Grafik/farbe_11.jpg");
    background-repeat:no-repeat;
    background-position:4px 50%;
    background-size: 109px;
}

.placeholder18 {
    margin-right: 50px;
    width: 145px;
    height: 130px;
    float: left;
    position: absolute;
    top: 455px;
    left: 630px;
    background: url("/Content/Grafik/farbe_12.jpg");
    background-repeat:no-repeat;
    background-position:4px 50%;
    background-size: 109px;
}

.placeholder20 {
    margin-right: 50px;
    width: 145px;
    height: 130px;
    float: left;
    position: absolute;
    top: 180px;
    left: 630px;
    background: url("/Content/Grafik/farbe_04.jpg");
    background-repeat:no-repeat;
    background-position:4px 50%;
    background-size: 109px;
}

.imgcontainermood {
    width: 113px;
    height: 360px;
    float: left;
}

.imgcontainermoodall {
    width: 140px;
    height: 400px;
    float: left;
    border: 1px solid black;
    background: transparent;
    z-index: -1;
}

.imagecontainer-wrapper {
    border:1px solid #000;
    position: absolute;
    top: 175px;
    left: 870px; 
    margin:0; 
    list-style:none; 
    padding:3px; 
    width:133px;
}

.dragimg {
    border:1px solid #000; 
    display:block; 
    margin-bottom: 3px; 
    padding: 3px;
    width:105px;
    background: #ffffff;
}
		
.imagecontainer-wrapper span {
    border:1px solid #000; 
    display:block; 
    margin-bottom: 3px; 
    padding: 3px;
}


#container_buehne {
   position: relative;
}

.imgcontainermood1 {
    width: 113px;
    height: 25px;
    float: left;
}

.imgcontainermood2 {
    width: 113px;
    height: 19px;
    float: left;
}


#background_buehne {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
   overflow: hidden;
}
.map-search-link {
    display: none;
}

#words td {
    width: 200px;
}

/* 3D views */

#threedimg {
   border: 1px solid black;
   width: 800px;
   height: 100px;
}

#angleimg {
    margin: 0 auto;
    width: 310px;
    height: 310px;
    position: relative;
    margin-top: 10px;
    background-color: #828282;
    border-radius: 20px;
}

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

    .arrow.selected {
        background-position: 0px -47px !important;
    }

#arrow1 {
    top: 5px;
    left: 50%;
    margin-left: -25px;
    background: url('3d/arrow1.png');
}

#arrow2 {
    top: 10px;
    right: 10px;
    background: url('3d/arrow2.png');
}

#arrow3 {
    top: 50%;
    margin-top: -25px;
    right: 5px;
    background: url('3d/arrow3.png');
}

#arrow4 {
    bottom: 10px;
    right: 10px;
    background: url('3d/arrow4.png');
}

#arrow5 {
    bottom: 5px;
    left: 50%;
    margin-left: -25px;
    background: url('3d/arrow5.png');
}

#arrow6 {
    bottom: 10px;
    left: 10px;
    background: url('3d/arrow6.png');
}

#arrow7 {
    top: 50%;
    margin-top: -25px;
    left: 5px;
    background: url('3d/arrow7.png');
}

#arrow8 {
    top: 10px;
    left: 10px;
    background: url('3d/arrow8.png');
}

#aboveimg {
    position: absolute;
    top: 55px;
    left: 55px;
    border: 1px solid black;
    width: 198px;
    height: 198px;
}

.borderpdl {
    border: 1px;
    border-style: solid;
    padding-left: 5px;
    padding-top: 5px;
}

/* Organisational chart */
.orgchart {
	border-spacing: 0;
	border-collapse: collapse;
	margin: 0 auto;
    clear: both;
}
.orgchart td {
	width: 60px;
	height: 24px;
}

.orgchartbig td {
    width: 5px;
}

    .orgchartbig td.case {
        width: 120px;
    }

    .orgchartbig td.between {
        width: 45px;
    }

.orgchart td.case {
	border: 1px solid black;
}

    .orgchart td.case.up {
        background-color: #BCD5F2;
    }

    .orgchart td.case.down {
        background-color: #7AD1FF;
    }
		
.orgchart td.right {
	border-right: 1px solid black;
}
		
.orgchart td.bottom {
	border-bottom: 1px solid black;
}
		
.orgchart td.top {
	border-top: 1px solid black;
}
		
.orgchart td.legend {
	width: auto;
}
		
.orgchart .alr {
	text-align: right;
}
		
.orgchart .alg {
	text-align: left;
}

.toplace {
    float: left;
    margin: 30px 30px 0 0;
}

    .toplace .ui-draggable, .orgchart .ui-draggable {
        cursor: move;
    }

.place {
    width: 122px;
    height: 26px;
    margin-bottom: 10px;
    border: 1px solid blue;
}

.name {
	width: 120px; /* Must be twice the cell, since a case is 2 cells together */
	height: 24px;
    line-height: 24px;
	padding: 1px;
	text-align: center;
}

    .name.up {
        background-color: #BCD5F2;
    }

    .name.down {
        background-color: #7AD1FF;
    }

.orgchartsmall {
    width: 118px;
    font-size: 13px;
    margin-right: -100px; /* To correct a strange bug with Webkit browsers */
}

.orgchartlongtext {
    font-size: 12px;
}

.orgchartverylongtext {
    font-size: 12px;
    line-height: 12px;
}

.orgchartexplaintable {
	border-spacing: 0;
	border-collapse: collapse;
    width: 100%;
}
    .orgchartexplaintable tr {
	    border: 2px solid black;
    }

    .orgchartexplaintable td {
	    border-right: 2px solid black;
        border-top: 2px solid black; /*IE7*/
		border-bottom: 2px solid black; /*IE7*/
        padding: 5px;
        max-width: 120px;
        vertical-align:middle;
        font-weight: normal;
    }

        .orgchartexplaintable td.orgchartprice {
	        border-right: 1px dotted black;
            min-width: 10px;
        }

.orgcharttitle, .orgchartyear {
	font-weight: bold !important;
}
.orgchartyear {
	text-align: center;
}

#orgchartquestion {
    float: left;
    margin-bottom: 10px;
}

#orgchartexplanation {
    clear: both;
}

ul.question li.orgsimple, ul.question li.orgsimplehz {
    line-height: 25px;
}

ul.question li.orgsimplehz {
    font-size: 13px;
}

    ul.question li.orgsimple img {
        padding-right: 5px;
        cursor: pointer;
    }

ul.orgchartsimplelist {
    float: left;
    padding-top: 15px;
    margin-right: 20px;
}

.orgchartthumb {
    float: left;
}

ul.orgchartmultiplelist li {
    display: inline-block;
    padding-left: 75px;
    width: 95px;
}

.orgchartsingleimg {
    width: 250px;
}

.orgchartmultipleimg {
    width: 170px;
}

.orgcharthelpimg {
    cursor: pointer;
}

.orgchartdialogimg {
    vertical-align: middle;
}

.orgcharthint {
    clear: both;
    padding-top: 10px;
    text-align: center;
}

.orgchartleftlegend {
    font-size: 12px;
    text-align: left;
}

.orgchartplaceholder {
    font-size: 14px;
    text-align: center;
}

/* Wheels to select */
.circleselectable, .whitecircle {
	stroke: black;
	stroke-width: 1;
}
.circleselectable {
	cursor: pointer;
	fill: red;
}
.whitecircle {
    fill: white;
}
.centercircle {
	fill: black;
}
.circleselected {
	fill: #a0bae3;
}
.circlearrow {
	font-size: 40px;
    vertical-align: middle;
}

/* Concentration */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Apparently some margin are still there even though it's hidden */
}

.numberinputnospin {
    border: 1px solid #aaa;
    width: 60px;
}

/* Register page*/
#tableuserdata, #tableuserdata2 {
    width: 800px;
}

#tableuserdata {
    margin-bottom: 0;
}

#tableuserdata3 {
    width: 500px;
}

td.registerlabel {
    width: 20%;
}

td.registerfield {
    width: 80%;
}

#dialog-help, #register-confirm {
    font-family: Arial, Sans-Serif;
    font-size: 14px;
    font-weight:bold;
}

    #dialog-help, #register-confirm span {
        float:left;
        margin:0 7px 20px 0;
        font-family: Arial, Sans-Serif;
        font-size: 12px;
        font-weight:bold;
    }

/* BaseKnowledge specific styles */
.base-knowledge-aufgabe {
    height: 400px !important;
    margin: 0 auto !important;
    width: 900px !important;
}

    .base-knowledge-aufgabe #fragen {
        float: left;
        width: 70%;
    }

        .base-knowledge-aufgabe #fragen .frage {
            text-align: center;
            width: 210px;
	        float:left;
        }

        .base-knowledge-aufgabe #fragen span.dropbox{
            border: 1px dashed #179DDA;
            border-radius: 5px 5px 5px 5px;
            display: block;
            height: 50px;
            line-height: 50px;
            margin: 0 auto;
            text-align: center;
            width: 150px;
	        margin-top:20px;
	        position:relative;
        }

    .base-knowledge-aufgabe #antworten {
	    float:right;
        width: 20%;
        height: 300px;
	    padding:10px;
    }

    .base-knowledge-aufgabe .ui-draggable {
        border: 1px solid #179DDA;
        border-radius: 5px 5px 5px 5px;
        display: block;
        height: 50px;
        line-height: 25px;
        margin: 0 auto;
        text-align: center;
        width: 150px;
	    background-color:#fff;
	    margin-bottom:10px;
	    cursor:move;
}

    .base-knowledge-aufgabe .ui-state-active {
        background-color:#179DDA;
	    color:#fff;
    }
        
    .base-knowledge-aufgabe .antworten-over {
        border: 1px dashed #179DDA;
        border-radius: 5px 5px 5px 5px;
    }

.mathezahlen {
	margin:0 auto;
	width:155px;
}

    .mathezahlen ul {
	    list-style-type: none;
	    margin: 0;
	    padding: 0;
	    margin-bottom: 10px;
    }

    .mathezahlen li {
	    margin: 5px;
	    padding: 5px;
	    width: 150px;
	    cursor:move
    }

.mathezahlen-math {
	margin:0 auto;
}

    .mathezahlen-math ul {
	    list-style-type: none;
	    margin: 0;
	    padding: 0;
	    margin-bottom: 10px;
    }

    .mathezahlen-math li {
        cursor: move;
        float: left;
        height: 50px;
        line-height: 50px;
        margin: 5px;
        padding: 5px;
        text-align: center;
        width: 65px;
    }

/* Satzbau */
.satzbau-aufgabe-example, .satzbau-aufgabe {
	width: 600px !important;
	margin: 0 auto !important;
	text-align: center !important;
}

    .satzbau-aufgabe-example #fragen, .satzbau-aufgabe #fragen {
	    margin-bottom: 50px;
    }

    .satzbau-aufgabe-example .word, .satzbau-aufgabe .word {
	    cursor: pointer;
    }

    .satzbau-aufgabe-example .selected, .satzbau-aufgabe .selected {
	    text-decoration: line-through;
    }

.satzbau-aufgabe {
    width: 950px !important;
}

/* Horizontal list on two lines */
.horizontallist {
    display: inline-block;
    width: 40%;
}

/* Wrong letter */
.wrongletterbox {
    position: absolute;
    z-index: 1;
    cursor: pointer;
}

    .wrongletterbox img {
        width: 56px;
        height: 56px;
    }

.smallanswer {
    font-size: 13px;
}

.smallthinkinganswer {
    font-size: 10px;
}

.small-new-event {
    font-size: 13px;
}

.listcenter {
    position: relative; float: left; display: block; left: 50%;
}
    .listcenter li {
        position: relative; float: left; display: block; right: 50%;
    }

#main lip,
#right lip,
#Message lip
{
	margin-bottom:5px;
	margin-left:30px;
	padding:0;
	line-height:140%;
	list-style-image:url("/Content/li_ok.gif");
}


#main  lip.error,
#Message lip.error
{
	margin-bottom:5px;
	margin-left:30px;
    padding: 0;
    font-weight: bold;
	line-height:100%;
	list-style-image:url("/Content/li_ausrufe_gelbdreieck_60.gif");
}


#main .aufgabe ulp
{
  float: left;
  width: auto;
  margin-bottom: 0;
}

#main .aufgabe lip
{
	width:50px;
	float:left;
	margin:0;
	padding-right:20px;
	list-style:none;
}
	
#main .aufgabe lip.last
{
	width:400px;
	float:left;
	margin:0;
	padding:7px 0 0 0;
	list-style:none;
}

.imgtest {
    position: relative;
    border: #2a2b2a;
}

.imgtest .text {
    position:absolute;
    align-items: center;
    left:10px;
}

#text
{
    z-index:100;
    position:absolute;    
    color:white;
    font-size:24px;
    font-weight:bold;
    left:150px;
    top:350px;
}

.word-foobar:before {
    content: attr(data-text);
}

div.ui-dialog > div.ui-dialog-titlebar.ui-widget-header > button {
    display: none;
}
div.ui-dialog[aria-describedby='dialog-alt'] > div.ui-dialog-titlebar.ui-widget-header > button {
    display: block;
}