@charset "utf-8";

/*@import url(http://fonts.googleapis.com/css?family=PT+Serif);*/
@import url(https://fonts.googleapis.com/css?family=Snippet);

@font-size:15px;

@column:70px;
@padding-column:10px;
@height-menu:24px;
@height-footer:30px;

@cyan:#00A5E8;
@dark-cyan:#008ed1;
@30-gray:#C5C6C8;
@50-gray:#9c9d9f;
@70-gray:#6F7072;

.box-sizing(@mode: border-box){
	-webkit-box-sizing:@mode;
	-moz-box-sizing:@mode;
	box-sizing:@mode;
}

*{
	margin:0;
	padding:0;
}

html,body{
	width:100%;
	height:100%
}
body{
	height:100%;
	font:@font-size Helvetica, Arial, sans-serif;
	line-height:1.2;
	background:url(../images/Bild_Hof_1_1.jpg) no-repeat;
	background-size:cover;
}

a {
  color: orange;
  text-decoration: none;
}

div#header_wrapper {
  height: 130px;
  overflow: hidden;
  width: 100%;

	div#header{
		background: white none repeat scroll 0 0;
		border-bottom-left-radius: 50% 60%;
		border-bottom-right-radius: 50% 60%;
		box-shadow: 0 0 10px black;
		.box-sizing;
		height: 100%;
		margin-left: -5%;
		position: relative;
		text-align: center;
		width: 110%;
		z-index: 3;
		
		div[class^="moduletable_start_strowota"], div[class^="moduletable_start_praxis"]{
			background-attachment: scroll, scroll;
			background-clip: border-box, border-box;
			background-color: rgba(0, 0, 0, 0);
			background-image: none, url("../images/strowota_logo.svg");
			background-origin: padding-box, padding-box;
			background-position: 0 0%, center center;
			background-repeat: repeat, no-repeat;
			background-size: contain;
			border-radius: 10px;
			display: inline-block;
			height: 90%;
			width:168px;
			margin-top: 6px;
			
			&:hover{
				background-image: none, url("../images/strowota_logo.svg");
				box-shadow: 0 0 19px gray;
			}
			
			a{
				display: block;
				height: 117px;
				width: 168px;
			}
		}
		
		div.moduletable_start_praxis{
			background-image: none, url("../images/praxis_logo_gray.svg");
			background-size:90% auto;
			margin-left: 90px;
			
			&:hover{
				background-image: none, url("../images/praxis_logo.svg");
			}
		}
		
		div.moduletable_start_praxis_active{
			background-image: none, url("../images/praxis_logo.svg");
			
			&:hover{
				background-image: none, url("../images/praxis_logo.svg");
				box-shadow: none;
			}
		}
		
		div[class*="moduletable"]:first-child{
			margin-left:0;
		}
	}
}
div#menu{

	text-transform: uppercase;
	margin-top:-60px;

	div[class*="moduletable"] > ul {
		height: 95px;
		list-style: none;
		text-align: center;
		
		>li{
			background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
			border-bottom: 30px solid #ffffff;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
			display: inline-block;
			height: 65px;
			margin-left: 20px;
			position: relative;
			top: 0;
			transition: top 1s ease 0s;
			width: 156px;
			
			&:first-child{
				margin-left: 0;
			}
			
			&:hover{
				border-bottom-color: #89932c;
				top: 20px;
				
				ul{
					display:block;
				}
			}
			
			>a{
				.box-sizing;
				color: black;
				display: block;
				font-weight: bold;
				line-height: 30px;
				padding: 20px;
				width: 100%;
				box-sizing: border-box;
				height: 95px;
				
				&:before{
					background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
					.box-sizing;
					content: "Praxis von Dr. Christina Schubert";
					float: left;
					font-weight: normal;
					height: 45px;
					line-height: 1.2;
					padding-top: 20px;
					position: relative;
					text-transform: none;
				}
			}
			
			>ul{
				background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
				border-radius: 5px 10px 10px;
				display: none;
				float: left;
				line-height: 1.8;
				text-align: center;
				width: 100%;
				
				li{
					border-radius: 5px 10px 10px;
					list-style: outside none none;
					
					a{
						color: black;
						display: block;
						height: 100%;
						width: 100%;
					}
					
					&:hover{
						background: #d0d97f none repeat scroll 0 0;
					}
				}
			}
		}
	}

	div.moduletable_startmenu{
		
		ul{
			height: 140px;
			margin-top: 35px;
			
			li{
				height: 110px;
				margin-left: 100px;
				
				a{
					height: 140px;
					
					&:before{
						height: 90px;
					}
				}
				
				&:first-child{
					
					a{
						
						&:before{
							content: "Vermietung des Ferienhauses";
						}
					}
				}
			}
		}
	}
			
	div.moduletable_pseudomenu{
		display: none;
		height: 0;
		width: 0;
	}
	
	div.moduletable_menu_strowota{
		a:before{
			visibility:hidden;
		}
	}
}

div#content{
	background: rgba(88, 105, 15, 0.9) none repeat scroll 0 0;
	border: 20px solid transparent;
	border-radius: 10px 10px 0 0;
	bottom: 30px;
	.box-sizing;
	color: white;
	font-family: Snippet,Arial,helvetica,sans-serif;
	hyphens: auto;
	left: 0;
	margin: 0 auto;
	padding-right:10px;
	max-height: 76px;
	overflow: hidden;
	overflow-x:hidden;
	position: absolute;
	right: 0;
	transition: max-height 1500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s;
	width: 860px;
	
	&:hover,&:focus,&:active{
		max-height: 500px;
		overflow: auto;
	}
	
	h2{
		margin-bottom: 10px;
	}
	
	p{
		margin-bottom:@font-size / 2;
	}
	
	div#haftungsausschluss{
		font-size: smaller;
	}
}
div#footer{
	background: #89932c none repeat scroll 0 0;
	bottom: 0;
	height: @height-footer;
	position: absolute;
	width: 100%;
	text-align:center;
	
	div[class*="moduletable"]{
		display:inline;
		height:100%;
	}
	
	ul{
		display: inline;
		font-size: smaller;
		height: 100%;
		margin: 0 auto;
		text-align: center;
		text-transform: uppercase;
		
		li{
			display: inline-block;
			height:100%;
			line-height:@height-footer;
			list-style: outside none none;
			vertical-align: middle;

			&:before{
				color: #4d4d4d;
				content: "•";
				margin-left: 8px;
				margin-right: 8px;
			}
			
			&:first-child:before{
				content:none;
			}
			
			a{
				color: #4d4d4d;
				
				&:hover{
					color: #b3b3b3;
				}
			}
		}
	}
	
	div[class*="impressum"]{
		
		li:first-child:before{
			color: #4d4d4d;
			content: "•";
			margin-left: 8px;
			margin-right: 8px;
		}
	}
}

ul#supersized img{
	width:100%!important;
	height:auto!important;
}