@import url(mini-reset.css);

/* ----------------------------------------------------- Browser specific CSS */

.js div { } /* apply only on JavaScript enabled browsers */
.ie8 div { } /* apply only on Internet Explorer 7 and below */
.ie9 div { } /* apply only on Internet Explorer 6 and below */

/* ----------------------------------------------------- tabletish screens */
a:link {	color:#0a5096; text-decoration:none;	}
a:visited {	color:#366DE0; text-decoration:none;	}
a:active {	color:#163D8D; text-decoration:underline;	}
a:hover {	color:#163D8D; text-decoration:underline;	}


body{
	margin: 0px 0px 0px 0px;
	-webkit-transition: margin-top 1s;
	-moz-transition: margin-top 1s;
	transition: margin-top 1s;
}


h1 {
	font-size:16px;
	font-weight:bold;
	color:#0a5096;
	line-height: 16px;
	font-family: arial, sans-serif;
	border-bottom: 6px #edf1f3 solid;
	margin-top: 0.67em;
	margin-bottom: 0.67em;
}


h2 {
	font-size:15px;
	color:#0a5096;
	font-weight: bold;
	line-height: 16px;
	font-family: arial, sans-serif;	
}


h3 {
	font-size:15px;
	color:#333333;
	font-weight:bold;
	line-height: 16px;
	font-family: arial, sans-serif;	
}


h4 {
	font-size:14px;
	font-weight:bold;
	color:#0a5096;
	line-height: 16px;
	font-family: arial, sans-serif;
	border-top: 2px #dbe2e9 solid;
	border-bottom: 2px #edf1f3 solid;
	margin-bottom: 3px;
}


h5 {
	font-size:14px;
	font-weight:bold;
	color:#333333;
	line-height: 16px;
	font-family: arial, sans-serif;
	border-top: 2px #dbe2e9 solid;
	border-bottom: 2px #edf1f3 solid;
}

h6 {
	font-size:13px;
	font-weight: bold;
	color: #0a5093;
	font-family: arial, sans-serif;
}


p  {
	font-size:13px;
	font-family: arial,sans-serif;
	color: #333333;
	line-height: 16px;
	margin: 1em 0px;
}


ul {
	font-size:13px;
	padding-left: 0px;
}


li {
	font-size:13px;	
}


td {
	font-size:13px;		
}


hr {
	border: 0px; /* Für Firefox und Opera */
 	border-top: solid 1px #666666;
 	border-bottom: solid 1px #FFFFFF; /* Für I.Explorer (Seiten-Hintergrundfarbe!) */
}


header{
	height: 117px;
	width: 100%;
	position: relative;
/*	background: url("/css/styling/header_background_blue.png") repeat-x scroll 0% 0% transparent;*/
	background: #004682; /* Old browsers */
	background: -moz-linear-gradient(top,  #004682 0%, #004682 17%, #0072bd 80%, #0072bd 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#004682), color-stop(17%,#004682), color-stop(80%,#0072bd), color-stop(100%,#0072bd)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #004682 0%,#004682 17%,#0072bd 80%,#0072bd 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #004682 0%,#004682 17%,#0072bd 80%,#0072bd 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #004682 0%,#004682 17%,#0072bd 80%,#0072bd 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #004682 0%,#004682 17%,#0072bd 80%,#0072bd 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004682', endColorstr='#0072bd',GradientType=0 ); /* IE6-9 */
}


.Header-Element{
	position: absolute;
}


#WZW-Sketch{
	margin-left: 20%;
}


#TUM-Logo {
}


#WZW-Logo{
	float: right;
	position: relative;
}


#HFM-Image{
	float: right;
	position: relative;
	padding-right: 0px
}


#Navigation-1{
	height: 18px;
	width: 100%;
	background-color: #dedede;
	margin-bottom: 1px;
	margin-top: 2px;
	font-family: arial, sans-serif;
	font-size: 11px;
	color: #666666;
	text-align: right;
	vertical-align: center;
	line-height: 18px;
	display: inline-block;
}


#LanguageButtonContainer{
	float: right;
	display: inline-block;
}

.activeLanguageButton{
	font-weight: bold;
}

#EnglishButton{
	float: right;
	position: relative;
	left: 15px;
}


#EnglishButton:hover {
	cursor: pointer;
	text-decoration: underline;
}


#GermanButton{
	float: right;
	position: relative;
	left: -100px;
}


#GermanButton:hover{
	cursor: pointer;
	text-decoration: underline;
}

#RetinaButton{
	float: right;
	position: relative;
	left: -110px;
}
#RetinaButton:hover{
	cursor: pointer;
	text-decoration: underline;
}

#RetinaButton.active{
	font-weight: bold;
}




#Navigation-2{
	width: 100%;
	background-color: #f7f7f7;
	margin-bottom: 22px;
	margin-top: 2px;
	font-family: arial, sans-serif;
	font-weight: bold;
	font-size: 12px;
	color: #004682;
	text-align: center;
	vertical-align: center;
	line-height: 22px;
	display: inline-block;
}


#ModeLinkContainer{
	display: inline-block;
	height: 22px;
}

.ModeSwitchButton{
	display: inline;
	padding-left: 22px;
	padding-right: 22px;
	line-height: 22px;
}

.ModeSwitchButton:hover{
	cursor: pointer;
	text-decoration: underline;
}


.ModeSwitchButton>a:visited{
	color: #004682;
}


.ModeSwitchButton.active{
	color: #469BE6;
}

#AdvancedSwitchButton{
	border-left: 1px solid #A3B7C7;
	border-right: 1px solid #A3B7C7;
}


#AdvancedSwitchButton>a{
	color: #469BE6;
}


#BeginnerSwitchButton{
	border-left: 1px solid #A3B7C7;

}

#HelpButton{
	border-left: 1px solid #A3B7C7;

}







#WoodListContainer{
	width: 280px;
	border: 1px solid #d3dee3;
	float: left;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
	margin-left: 8px;
}

#SearchField{
	background-color: #edf1f4;
	border-bottom: 1px solid #d3dee3;
	font-family: arial, sans-serif;
	padding-bottom: 8px;
	padding-top: 8px;
	padding-left: 22px;
	text-align: left;
	color: #666666;
	line-height: 13px;
	font-size: 13px;
	margin-bottom: 8px;
}


.FilterForm{
	display: inline-block;
}


.FilterInput{
	font-family: arial, sans-serif;
	color: #666666;
	line-height: 13px;
	font-size: 13px;
}



.WoodListElement{
	list-style: none;
	background-color: #dbe2e9;
	border-top: 1px solid #a3b7c7;
	padding-bottom: 8px;
	padding-top: 6px;
	padding-left: 22px;
	padding-right: 22px;
	font-family: arial, sans-serif;
	color: #004682;
	margin-left: 0px;
}


.WoodListElement:hover, .WoodListElement.selected:hover{
	cursor: pointer;
	/*background-color: #edf1f3;*/
	text-decoration:underline;
	background-color: #0072bd;
	color: #ffffff;
}


.WoodListElement.selected{
/*	background-color: #ffffff;
*/
	background-color: #0072bd;
	color: #ffffff;
}


span.italic{
	font-style: italic;
}



#FilterContainer{
	width: 280px;
	border: 1px solid #d3dee3;
	float: left;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
	margin-left: 8px;
}

#AdvancedFilterList{
	width: 100%;
}

.AdvancedFilterListElement{
	list-style: none;
	background-color: #dbe2e9;
	border-top: 1px solid #a3b7c7;
	padding-bottom: 8px;
	padding-top: 6px;
	padding-left: 22px;
	padding-right: 22px;
	font-family: arial, sans-serif;
	color: #004682;
	margin-left: 0px;
		width: 100%;

}

.AdvancedFilterListSubElement{
	list-style: none;
	background-color: #eef2f5;
	border-top: 1px solid #a3b7c7;
	padding-bottom: 8px;
	padding-top: 6px;
	padding-left: 44px;
	padding-right: 22px;
	font-family: arial, sans-serif;
	color: #004682;
	margin-left: 0px;
	width: 100%;
}


.AdvancedFilterListElement:hover, .AdvancedFilterListElement.selected:hover, .AdvancedFilterListSubElement:hover, .AdvancedFilterListSubElement.selected:hover{
	cursor: pointer;
	/*background-color: #edf1f3;*/
	text-decoration:underline;
	background-color: #0072bd;
	color: #ffffff;
}


.AdvancedFilterListElement.selected, .AdvancedFilterListSubElement.selected{
/*	background-color: #ffffff;
*/
	background-color: #0072bd;
	color: #ffffff;
}




#BeginnerContainer{
	width: 280px;
	float: left;
	overflow: hidden;
	margin-left: 8px;

}



#BeginnerFilterListContainer{
	width: 100%;
	border: 1px solid #d3dee3;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;

}


.BeginnerFilterListElement{
	list-style: none;
	background-color: #dbe2e9;
	border-top: 1px solid #a3b7c7;
	padding-bottom: 8px;
	padding-top: 6px;
	padding-left: 22px;
	padding-right: 22px;
	font-family: arial, sans-serif;
	color: #004682;
	margin-left: 0px;
	width: 100%;

}



.BeginnerFilterListElement:hover{
	cursor: pointer;
	text-decoration:underline;
	background-color: #0072bd;
	color: #ffffff;
}




#BeginnerQuestionContainer{
	width: 100%;
	margin-top: 8px;
	border: 1px solid #d3dee3;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
	font-family: arial, sans-serif;
	font-size: 13px;
	color: #004682;



}


#QuestionBody>p{
	width: 100%;
	background-color: #dbe2e9;
	border-bottom: 1px solid #a3b7c7;
	padding-left: 22px;
	padding-right: 22px;
	padding-top: 6px;
	padding-bottom: 8px;
	margin: 0em 0em;
	color: #004682;

}


/*#QuestionBody{
	width: 100%;
	background-color: #dbe2e9;

}*/
#QuestionBody>img{
	width: 100%;
	background-color: #dbe2e9;

}


.AnswerButton{
	width: 100%;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border-right: 1px solid #a3b7c7;
	border-bottom: 1px solid #a3b7c7;
	background-color: #dbe2e9;
/*	padding-left: 22px;
*/

}





.AnswerButton:hover{
	background-color: #0072bd;
	color: #ffffff; 
}


#MagnifierContainer{
	/*height: 232px;
	width: 70%;*/
/*	padding: 15px 15px 15px 15px;
*/	border: 1px solid #d3dee3;
	text-align: center;
	vertical-align: center;
	float: right;
	margin-right: 8px;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}


.ZoomWindowContainer{
	display: inline-block;	
	position: relative;
	vertical-align: top;
}



.ZoomWindow{
/*	display: inline-block;
*/	height: 351px;
	width: 234px;
	margin-top: 4px;
	border: 1px solid #a3b7c7;
	margin-top: 35px;
}


.DropDownMenu{
	/*background-color: #dbe2e9;
	border-top: 1px solid #a3b7c7;
	padding-bottom: 8px;
	padding-top: 6px;
	padding-left: 22px;
	font-family: arial, sans-serif;
	font-size: 10pt;
	color: #004682;
	margin-left: 0px;
	width: 100%;
	height: 22px;
	line-height: 22px;*/
	position: absolute;
/*	margin-top: -31px;
*/	width: 100%;
	z-index: 100;
}

.DropDownDefaultElement{
	list-style: none;
	background-color: #dbe2e9;
	border-top: 1px solid #a3b7c7;
	border-bottom: 1px solid #a3b7c7;
	border-left: 1px solid #a3b7c7;
	border-right: 1px solid #a3b7c7;
	padding-bottom: 8px;
	padding-top: 6px;
	padding-left: 22px;
	font-family: arial, sans-serif;
	color: #004682;
	margin-left: 0px;
	text-align: left;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	transition: background-color 0.5s;
	
}

.DropDownDefaultElement.inactive{
	background-color: #eef2f5;
	color: #666666;



}

.DropDownDefaultElement:hover, .DropDownElement:hover, .DropDownRotationSelectorElement:hover, .DropDownMiniElement:hover{
	cursor: pointer;
	/*background-color: #edf1f3;*/
	text-decoration:underline;
	background-color: #0072bd;
	color: #ffffff;
}

.DropDownElement{
	list-style: none;
	background-color: #eef2f5;
	border-bottom: 1px solid #a3b7c7;
	border-left: 1px solid #a3b7c7;
	border-right: 1px solid #a3b7c7;
	padding-bottom: 8px;
	padding-top: 6px;
	padding-left: 37px;
	font-family: arial, sans-serif;
	color: #004682;
	margin-left: 0px;
	text-align: left;
}


.DropDownRotationSelectorElement{
	list-style: none;
	background-color: #eef2f5;
	border-bottom: 1px solid #a3b7c7;
	border-left: 1px solid #a3b7c7;
	border-right: 1px solid #a3b7c7;
	padding-bottom: 8px;
	padding-top: 6px;
	padding-left: 37px;
	font-family: arial, sans-serif;
	color: #004682;
	margin-left: 0px;
	text-align: left;
}

.DropDownMiniElement{
	list-style: none;
	background-color: #ffffff;
	border-bottom: 1px solid #a3b7c7;
	border-left: 1px solid #a3b7c7;
	border-right: 1px solid #a3b7c7;
	padding-bottom: 8px;
	padding-top: 6px;
	padding-left: 52px;
	font-family: arial, sans-serif;
	color: #004682;
	margin-left: 0px;
	text-align: left;
}





.ZoomLevelBox{
	position: absolute;
	width: 100%;
	height: 31px;
	z-index: 101;
	background-color: #dbe2e9;
	border-top: 1px solid #a3b7c7;
	border-bottom: 1px solid #a3b7c7;
	border-left: 1px solid #a3b7c7;
	border-right: 1px solid #a3b7c7;
	padding-bottom: 8px;
	padding-top: 6px;
	font-family: arial, sans-serif;
	color: #004682;
	margin-left: 0px;
	text-align: center;
	display: none;
	font-size: 13px;
}

.ZoomLevelBox.active{
	display: block;
}


#TraversalBox{
	background-color: #0072bd;
	overflow: hidden;
/*	max-height: 100%;
*/	/*max-width: 100%;*/
/*	background: url('/css/styling/1x.png') #0072bd;
*/	background-size: 100%;
}





#RadialBox{
	background-color: #004682;
	/*background: url("/css/styling/magnifier_background-gradient-left.png") repeat-y scroll 0% 0% transparent;*/
/*	background: url('/css/styling/5x.png') #004682;
*/	background-size: 100%;
	overflow: hidden;


}

#RadialBox > img.radialzoom, #TangentialBox > img.tangentialzoom, #TraversalBox > img, #MiniZoomBox > img.miniradialzoom, #MiniZoomBox > img.minitraversalzoom, #MiniZoomBox > img.minitangentialzoom{
	height: 100%;
	
}


#TangentialBox, #MiniZoomBox{
	background-color: #0072bd;
	/*background: url("/css/styling/magnifier_background-gradient-right.png") repeat-y scroll 0% 0% transparent;*/
/*	background: url('/css/styling/10x.png') #0072bd;
*/	background-size: 100%;
	overflow: hidden;

}




#MiniMagnifierContainer{
	/*height: 232px;
	width: 70%;*/
/*	padding: 15px 15px 15px 15px;
*/	border: 1px solid #d3dee3;
	text-align: center;
	vertical-align: center;
	float: right;
	margin-right: 8px;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;

}


#InfoButton{
/*	width: 100px;
*//*	border: 1px solid #d3dee3;
*/	position: absolute;
	right: 0px;
/*	background-color: #dbe2e9;
*/	vertical-align: center;
	font-family: arial, sans-serif;
	color: #004682;
	font-size: 13px;
	text-align: center;
	/*padding: 4px;*/
	margin-right: 8px;
	-webkit-transition: right 1s;
	-moz-transition: right 1s;
	transition: right 1s;
	z-index: 40;
}

#InfoButton >img{
	height: 60px;
}

#InfoButtonText{
	position: relative;
	padding-top: auto;
	padding-bottom: auto;
}

#InfoButton:hover {
	cursor: pointer;
	/*text-decoration: underline;
	background-color: #0072bd;
	color: #ffffff;*/

}

#InfoButton.InfoContainerActive{
	right: 892px;
}


#InfoContainer{
	position: absolute;
	right: 0px;
	width: 0px;
	z-index: 101;
	background-color: #fff;
	-webkit-transition: width 1s;
	-moz-transition: width 1s;
	transition: width 1s;
	overflow: hidden;

}

#InfoContainer.InfoContainerActive{
	width: 900px;
	
}

#Infobox{
	width: 900px;
	padding: 15px 15px 15px 15px;
	border: 1px solid #d3dee3;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}

#Infobox>img{
	clear: right;
	float: right;
	width: 30%;
	padding-top: 8px;
	padding-bottom: 8px;
}

#Infobox>p{
	float: left;
	clear: left;
	width: 65%;
}

#Infobox>p.italic{
	float: left;
	clear: left;
	width: 65%;
	font-style: italic;
}

#Infobox>h4, #Infobox>h5{
	clear: both;
}

#Infobox>img.fullsize{
	clear:left;
	float:left;
	width:auto;
	max-width:100%;
}

#Infobox>h5.unterpunkt{
	clear: left;
}

#AttributeList{
}

.InfoBoxListElement{
	list-style: disc;
	font-size: 13px;
	list-style-position: inside;
	font-family: arial, sans-serif;
}


#HelpContainer{
	padding: 6px 22px 8px 22px;
	border: 1px solid #d3dee3;
	z-index: 200;
	vertical-align: center;
	float: right;
	margin-right: 8px;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;

}


footer{
	clear: both;
	height: 18px;
	width: 100%;
	background-color: #dedede;
	font-family: arial, sans-serif;
	font-weight: normal;
	color: #666666;
/*	margin-top: 8px;
*/	margin-bottom: 2px;
	font-size: 11px;
	position: absolute;
	bottom: 0px;
	vertical-align: center;
	line-height: 18px;
	padding-left: 22px;
	padding-right: 22px;

	-webkit-transition: bottom 1s;
	-moz-transition: bottom 1s;
 	transition: bottom 1s;

}

footer>a>span{
	font-family: arial, sans-serif;
	font-weight: normal;
	color: #666666;
}

#AboutButton{
	float: right;
	}


#AboutButton:hover {
	cursor: pointer;
	text-decoration: underline;
}



#PrivacyPolicyButton{
	float: right;
	position: relative;
	left: -20px;
}
#PrivacyPolicyButton:hover{
	cursor: pointer;
	text-decoration: underline;
}

#AboutContainer {
	width: 100%;
	height: 0px;
	background-color: #f7f7f7;
	z-index: 10;
	position: absolute;
	bottom: 0px;
	overflow: hidden;
	/*display: none;*/
	-webkit-transition: height 1s;
	-moz-transition: height 1s;
	transition: height 1s;

}

#AboutContainerContent{
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
	height: 100%;
	width: 100%;
}


#AboutThisProject{
	float: left;
	height: 100%;
	width: 50%;
	padding-left: 22px;
	padding-top: 22px;
	padding-right: 22px;
	padding-bottom: 22px;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;


}

#AboutPicture{
	height: 180px;
	width: 140px;
	float: left;
	margin-top: 8px;
	margin-right: 8px;
}

#AboutHFM{
	float: right;
	/*width: 177px;*/
	width: 25%;
	height: 100%;
	padding-top: 22px;
	padding-right: 22px;
	padding-bottom: 22px;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;

}

#AboutHFM>h6, #AboutHFM>p, #AboutHFM>a{
	margin-left: 12px;
	font-size: 13px;
}

#AboutHFM>img{
	margin-bottom: 12px;
}



#LegalStatement{
	float: right;
	width: 25%;
	height: 100%;
	padding-top: 22px;
	padding-right: 22px;
	padding-left: 22px;
	padding-bottom: 22px;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;

}


#LegalStatement>ul{
	font-size: 13px;
	font-family: arial, sans-serif;
	list-style: disc;
	list-style-position: inside;
}


body.AboutContainerActive{
	margin-top: -400px;

}




footer.AboutContainerActive{
 	bottom: 400px;
 	margin-bottom: 0px;
 	z-index: 10;
 

}


#AboutContainer.AboutContainerActive{
	height: 400px;
	

}




#TestWindowSolutionButton{
	background-color: #dbe2e9;
	border-top: 1px solid #a3b7c7;
	border-bottom: 1px solid #a3b7c7;
	border-left: 1px solid #a3b7c7;
	border-right: 1px solid #a3b7c7;
	padding-bottom: 8px;
	padding-top: 6px;
	padding-left: 22px;
	font-family: arial, sans-serif;
	color: #004682;
	margin-left: 0px;
	text-align: left;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	transition: background-color 0.5s;
	margin-top: 5px;
	font-size: 13px;
}

#TestWindowSolutionBox{
	background-color: #dbe2e9;
	border-top: 1px solid #a3b7c7;
	border-bottom: 1px solid #a3b7c7;
	border-left: 1px solid #a3b7c7;
	border-right: 1px solid #a3b7c7;
	padding-bottom: 8px;
	padding-top: 6px;
	padding-left: 22px;
	font-family: arial, sans-serif;
	color: #004682;
	margin-left: 0px;
	text-align: left;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	transition: background-color 0.5s;
	margin-top: 5px;
	font-size: 13px;
	height: 31px;
}

#TestWindowNextButton{
	background-color: #dbe2e9;
	border-top: 1px solid #a3b7c7;
	border-bottom: 1px solid #a3b7c7;
	border-left: 1px solid #a3b7c7;
	border-right: 1px solid #a3b7c7;
	padding-bottom: 8px;
	padding-top: 6px;
	padding-left: 22px;
	font-family: arial, sans-serif;
	color: #004682;
	margin-left: 0px;
	text-align: left;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	transition: background-color 0.5s;
	margin-top: 5px;
	font-size: 13px;
}


#TestWindowSolutionButton:hover, #TestWindowNextButton:hover{
	cursor: pointer;
	text-decoration:underline;
	background-color: #0072bd;
	color: #ffffff;
}

/* ----------------------------------------------------- smartphonish screens */
@media only screen and (max-width: 1230px) {

#InfoButton.InfoContainerActive{
	right: 492px;
}


#InfoContainer.InfoContainerActive{
	width: 500px;
	
}

#Infobox{
	width: 500px;
}

}

/* ----------------------------------------------------- desktopish screens */
@media only screen and (min-width: 1024px) {

}