@red: 							#b83b26;
@gray:							#9e9fa1;
@darkGray:						#545152;
@contentWidth: 				825px;
@contentPadding: 				10px;
@contentBorderThickness:	2px;
@fullWidth:						@contentWidth + 2 * @contentPadding + 2 * @contentBorderThickness;
@rightWidth: 					270px;
@textWidth:						@contentWidth - @rightWidth - 5;

@background-color: #e7e7e8;

html,body{
	height:100%;
	width:100%;	
}
body{
	font-family:Verdana,Arial;
	font-size:0.7em;
	line-height:1.5em;
	min-width:@fullWidth;
	background:url(/buw2011_statimg/background.jpg) center bottom no-repeat fixed;
	color:@darkGray;
}
p{
	margin:1em 0;
}
strong{
	font-weight:bold;
}
font{
	color:@darkGray;
	&[color]{
		color:@red;
	}
}
.rot{
	color:@red;
}
[align="center"]{
	text-align:left;
}
.clear{
	clear:both;
}


.transition(@property, @time, @easing){
	transition:@property @time @easing;
	-o-transition:@property @time @easing;
	-moz-transition:@property @time @easing;
	-webkit-transition:@property @time @easing;
}
.border-radius(@radius){
	border-radius:@radius;
	-o-border-radius:@radius;
	-moz-border-radius:@radius;
	-webkit-border-radius:@radius;
}
.transparent-background(@r,@g,@b,@a){
		//background: rgb(@r,@g,@b);
		background: rgba(@r,@g,@b,@a);

		filter: ~`"progid:DXImageTransform.Microsoft.gradient(startColorstr="+to_rgb("@{r}","@{g}","@{b}","@{a}")+", endColorstr="+to_rgb("@{r}","@{g}","@{b}","@{a}")+")"`;
		-ms-filter: ~`'"progid:DXImageTransform.Microsoft.gradient(startColorstr='+to_rgb("@{r}","@{g}","@{b}","@{a}")+', endColorstr='+to_rgb("@{r}","@{g}","@{b}","@{a}")+')"'`;
}

/**** LAYOUT ****/
.center{
	width:@contentWidth;
	padding:@contentPadding;	
	margin-left:-(@fullWidth) / 2;
	left:50%;
	position:relative;
	float:left;
	clear:both;
}

#main{
	background:white;
	border:@contentBorderThickness solid @gray+#333;	
	//.border-radius(3px);
	margin:30px auto 10px;	
	
	>div{
		width:@rightWidth;
		background-color:@background-color;
	}
	>#content{		
		float:left;	
		width:@textWidth;
		>#head-img{
			position:relative;
			overflow:hidden;
			z-index:1;
			p{
				.transparent-background(0,0,0,0.4);
				left:0;
				position:absolute;
				bottom:0;
				padding:19px 60px 0 190px;
				margin:0;
				height:100px;
				font-weight:bold;
				color:#fff;
				width:@textWidth - 250px;
				>strong{
					color:@red;
				}
			}
		}
		>.block{
			margin:40px;
		}
		h1,h2{
			font-size:1.3em;
			color:@red;
			margin:0 0 1em;
		}
		h2{
			font-size:1.1em;
		}
		
		.block ul{
			margin:1em 0 1em 2em;
			li{
				list-style:disc;
			}
		}
		
		td{
			vertical-align:top;
			p{
				margin-top:0;
			}
		}
	}
	>#right{
		float:right;
		>ul>li,#news ul>li{
			@border:2px solid #fff - #020202;
			border-top:@border;
			&:last-child{
				border-bottom:@border;
			}
			&.empty{
				background:none;
			}			
		}
		li{
			padding:2px 0 2px 10px;		
			background:url(/buw2011_statimg/list-image.png) left .8em no-repeat;

		}		
		>*{
			padding:10px 20px 10px 63px;		
			color:@gray;
			font-size:.9em;
		}
		>#head{
			padding:0;
		}
		>.foot{
			margin:30px 0;
			position:absolute;
			bottom:0;
			color:@darkGray;
		}
	}	
	.center;
	
	
	#video-nav,#star{
		z-index:2;
	}
	#video-nav{
		@width:56px;
		width:@width;
		position:absolute;
		top:215px;
		background:transparent;
		right:@rightWidth - @width / 2 + 13;
		font-weight:bold;
		a{
			display:block;
			.transparent-background(255,255,255,.7);
			
			text-align:center;
			width:50%;			
			float:left;
			line-height:25px;
			&:first-child{
				width:100%;
				float:none;
				clear:both;
				margin:0 0 3px 0;
			}
			&:hover{
				color:#000;
			}
		}		
	}
	
	#star{
		position:absolute;
		right:@rightWidth - 65;
		top:321px;
	}

}

#head{
	background:white;
	text-align:center;
}

#vergleich-tab{
	font-size:.9em;
	th{
		padding:2px 15px 2px 5px;	
	}
	td,th{
		border:1px solid @gray;
		div{
			padding:2px 15px 2px 5px;
			position:relative;
			span{
				&.icon{
					position:absolute;
					right:3px;
					top:2px;
					font-weight:bold;
					&.j{
						color:desaturate(#0f0,40%);
					}
					&.n{
						color:desaturate(#f00,40%);
					}
					&.s{
						color:desaturate(#fa0,20%);
					}
				}
			}
		}
	}
}

#foot{
	float:left;
	text-align:center;
	.center;
	margin-bottom:30px;
}

a{
	.transition(color,.1s,linear);

	color:@red;
	text-decoration:none;
	
	&:hover,&:focus{
		color:@gray;
	}	
}

.menublock{
	a{
		color:@gray;
		&:visited{
			color:@gray - #010101;
		}
		&:hover,&:focus{
			color:@red;
		}
	}
	
	ul{
		display:none;
	}
	li{
		&.inactive>a{
			color:@gray;
			cursor:default;
		}
		&.invisible{
			padding:0 !important;
			height:0 !important;
			>a{
				display:none;
			}
		}
		&.active{
			>ul{
				display:block;
			}
			>a{
				color:@red;
			}
		}
		.flag.sm1{
			position:absolute;
			right:27px;
		}
	}
	#subsub{
		position:absolute;
		right:@rightWidth + 15;
		margin-top:15px;
	}
		#subsub li{
			float:right;
			background:none 					!important;
			border-right:1px solid @red 	!important;
			margin:0 7px 0 0 					!important;
			padding:0 7px 0 0 				!important;
			img{
				float:left;
			}
			&:first-child{
				border:none !important;
			}
		}
}



#news{
	border-top:5px solid #fff;
	margin-bottom:120px !important;
	h1,h2{
		font-weight:bold;
		font-size:1.1em;
	}	
	h2,h2 a{
		color:@red;
		&:hover,&active{
			color:@gray;
		}
	}
	a{
		color:@darkGray;
		&:hover,&:active{
			color:@red;
		}
	}	
	p{
		margin:1em 0 0;
	}
	li{
		padding-top:4px 0 !important;	
		padding-bottom:4px 0 !important;	
	}
	li:last-child{
		border-bottom:none !important;
		font-weight:bold;
	}
}

/************************************/
/* Slides */

.slides_container {
    width:@textWidth;
    height:auto;
  }
  .slides_container div {
    width:@textWidth;
    height:auto;
    display:block;
	 overflow:hidden;
  }

#head-img .pagination{
	position:absolute;
	top:10px;
	right:10px;
	z-index:10;
	max-width:300px;
	/*text-align:center;
	width:100%;*/
	li{
		float:left;
		/*display:inline-block;*/
		margin:3px;
		a{
			display:block;
			width:8px;
			height:8px;
			border:2px solid #ddd;
			background:white;
			color:transparent;
			.transition(background-color,.5s,linear);			
		}
		&.current a{
			background:@red;
		}
	}
}

/*****************************************/

.seepark_gal{
	margin:5px 0;
	clear:both;
	width:100%;
	float:left;
	.seepark_gal_thumb{
		float:left;
		margin:0 10px 1em 0;
		max-width:145px;
		span{
			display:block;
			margin:.5em 0;
		}
	}
}

/*****************************************/

#zinsrechner{
	float:left;
	clear:both;
	#zr{
		>*{		float:left; }
		>p{ 		width:280px }
		>div{		width:120px; margin:2.45em 0 0 15px;	}
	}		
	
	.sum{
		font-size:1.4em;
		margin-top:2px;
		color:@red;
	}
}

/*****************************************/

#content form{
	label{
		float:left;
		width:50%;
		margin:.4em 0;
		&.check{
			width:auto;
			float:none;
		}
	}
	input[type=text],input[type=password],select{
		float:left;
		color:@darkGray;
		font-size:1em;
		width:40%;
		padding:0;
	}
	select{
		padding:1px 3px 1px 0px;
		margin:1px 0 1px 0;
	}
	button,.button{
		padding:0;
		width:20%;
		border:1px solid @gray;
		background:#ddd;
		color:@red;
		font-weight:bold;
		float:left;
		margin-left:50%;
	}
	br{
		clear:both;
		
	}
}