* {
	margin:0;
	padding:0;
}

area, map, img{
	border:none;
}

div, img, fieldset, table {
	position:relative;
}

html {
    background-color: #fdfeff;
	height:100%;
}
html.correct_puzzle {

}
body {
	color: #ffffff;
	font-family:'Helvetica Neue','Helvetica',helvetica,arial,sans-serif;
	font-style: normal;
    font-weight: 300;
    letter-spacing: 0.05em;
	font-size:14px;
	line-height:20px;
	width:100%;
	min-width:1000px;
    height: 1100px;
	-webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: none;
	min-height:1200px;
        background-color: : #16233a;

    background-image: linear-gradient(to bottom, #16233a 0%,#475b7c 72%,#475b7c 100%);

}
html.correct_puzzle body {

}

#sterne {
    position: absolute;
    top: 60px;
    left: 0;
    height: 240px;
    width: 100%;
    background-image:url('../img/sterne.png');
    background-position: center;
    background-repeat: repeat-x;
    background-size: auto 100%;
}

#boden {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-height: 1200px;
    width: 100%;
    min-width: 1000px;
    background-image: url('../img/boden_breit.png');
    background-position: top 600px center;
    background-size: auto 600px;
    background-repeat: repeat-x;
    box-sizing: border-box;
}

#preloadimg {
	display:none;
}
#container {
	width:100%;
	min-height:100%;
    height: 100%;
}
#correct_bg {
	position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    min-width: 1000px;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#070714+0,070714+100&0.25+0,0.72+100 */
    background: radial-gradient(ellipse at center, rgba(7,11,30,0.2) 5% ,rgba(7,11,30,0.7) 60% ,rgba(7,11,30,0.9) 100%);
    display: none;
}

html.correct_puzzle #correct_bg {
    display: block;

}
#header {
    width:100%;
    height:23px;
    position: absolute;
    top: 0;
    background:#013155;
    text-align:center;
    z-index: 10;
}
#footer {
	width:100%;
	height:29px;
    position: absolute;
    bottom: 20px;
    text-align:center;

}
#footer .inner, #container .inner {
	min-width: 1000px;
    max-width: 1400px;
    height: 100%;
	margin:0 auto;
}
html.correct_puzzle #footer{
	background: transparent;
}
html.correct_puzzle #footer .inner {
	display:none;
}
#footer .inner span {
	display:inline-block;
	margin:0 12px;
	line-height:30px;
    color: #888886;
}
#container .inner div, #container .inner h1{
	position:absolute;
	background-size:contain;
}


#main_headline, #main_headline_correct {
    font-weight:normal;
	text-align:center;
	font-size:38px;
	line-height:38px;
	letter-spacing:2px;
	position:relative;
	top:122px;
	width:100%;
}
html.correct_puzzle #main_headline {
	display:none;
}
#main_headline_correct {
	display:none;

}
html.correct_puzzle #main_headline_correct {
	display:block;
    text-shadow: 0 0 10px rgba(255,255,255,1);
}

#logo_wi, #logo_trr, #logo_ada {
	width:220px;
	height:60px;
	top:253px;
	right: 30px;
	background-image:url('../img/logo_wi.png');
}

#logo_trr {
    top:362px;
    background-image:url('../img/logo_trr.png');
}

#logo_ada {
    top:470px;
    height:32px;
    background-image:url('../img/logo_ada.png');
}


#logo_fau {
	width:220px;
	height:45px;
	top:960px;
	right: 30px;
	background-image:url('../img/logo_fau.png');
}

html.correct_puzzle #logo_fau {
    background-image:url('../img/logo_fau_correct.png');
}


html.correct_puzzle #logo_trr,
html.correct_puzzle #logo_wi,
html.correct_puzzle #logo_fau,
html.correct_puzzle #logo_ada  {
    opacity: 0.3;
}

#geschenk {
    color: #3C5475;
	width:1000px;
	height:176px;
	top:960px;
	left:calc(50% - 500px);
	cursor:pointer;
    z-index: 11;
}

html.correct_puzzle #geschenk.on, html.correct_puzzle #geschenk {
    cursor:default;
}
#reload {
    top: 835px;
    left:30px;
    text-align: center;
    cursor: pointer;
    display: none;
}
html.correct_puzzle #reload {
    display: none;
}
#reload .img {
    width:73px;
    height:73px;
    left: 2px;
    background-image:url('../img/button_neu.png');
}
#reload.on .img {
    background-image:url('../img/button_neu_on.png');
}
#reload .text {
    position: relative;
    display: block;
    top: 80px;
    opacity: 0.7;
}
#geschenk .img {
	width:73px;
	height:73px;
	top: -20px;
	left:474px;
	background-image:url('../img/button.png');
}
#geschenk.on .img {
    background-image:url('../img/button_on.png');
}
#geschenk .text {
	width: 100%;
	top: 60px;
	left: 0;
	text-align: center;
}

#geschenk .text_incorrect {
	color:#d3135a;
	top: 81px;
    display: none;
}
html.correct_puzzle #geschenk .text_click, html.correct_puzzle #geschenk .img {
	display:none;
}
html.correct_puzzle #geschenk .text_loading {

}
#geschenk .text_correct {
	font-size: 18px;
    line-height: 1.5;
    color: white;
	display:none;
    top: 43px;
}

#geschenk .text_correct .headline {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 8px;
}

html.correct_puzzle #geschenk .text_correct.text_first {

}
#erklaerung {
	width:300px;
	top:252px;
	left:34px;
}
html.correct_puzzle #erklaerung {
	display:none;
}

#baum {
    width: 600px;
    height: 720px;
    background-image:url('../img/baum_tiny.png');
    background-size: contain;
    position: absolute;
    left:calc(50% - 300px);
    top: 200px;
}
html.correct_puzzle #baum {
    width: 650px;
    left:calc(50% - 325px);
    background-image:url('../img/baum_loesung_min.png');
}

#punkte {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
}
html.correct_puzzle #punkte {
    display: none;
}

#linien-klick {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;

}

area.locked {
    cursor: not-allowed;
}

#linien {
    overflow: visible;
    position: absolute;
    left: -11px;
    top: 16px;
    z-index: 2;
}
#linien .linie {
    width: 622px;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

#linien .linie.on {
    opacity: 1;
}


html.correct_puzzle #kerzen, html.correct_puzzle #linien {
    display: none;
}

.uebersetzt {
    display: none;
}

.uebersetzt.on {
    display: block;
    position:relative !important;
    margin: 0 auto;
}

#sprachen {
    position: absolute;
    top: 14px;
    left: 0;
    width: 100%;
    text-align: center;

}

html.correct_puzzle #sprachen {
    opacity: 0.4;
}

.sprache {
    color: white;
    cursor: pointer;
}

.sprache.on {
    opacity: 0.4;
    pointer-events: none;
}