/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}

@font-face {
font-family: BeoFont;
src: url(../BeoFont.woff);
}

H1, H2, H3, H4, H5, H6, P, UL { font-family: BeoFont; color: #FFFFFF; }
A { color: #999999; text-decoration: none; }
A:hover { color: #f1f1f1; text-decoration: none; }
P, UL, OL { font-size: 15px; }
P { margin: 0px 0px 0px 0px; }

H1 { font-size: 21px; color: #FFFFFF; }
H2 { font-size: 14px; color: #FFFFFF; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FFFFFF; padding: 0 0 3px 0; }
H3 { font-size: 12px; color: #f1f1f1; }
H4 { font-size: 11px; color: #f1f1f1; }
H5 { font-size: 10px; color: #CCCCCC; }
H6 { font-size: 9px; color: #333333; font-weight: normal; }
H1, H2, H3, H4, H5, H6 { margin: 0px 0px 0px 0px; margin-top: 20px; }
H1 { margin: 0px 0px 0px 0px; margin-top: 20px; margin-bottom: 20px; }
H2, H3 { margin: 0px 0px 0px 0px; margin-top: 20px; margin-bottom: 10px; }
H4, H5, H6 { margin: 0px 0px 0px 0px; margin-top: 20px; margin-bottom: 10px; }


P.bodytext { font-family: BeoFont; font-size: 16px; color: #CCCCCC; line-height: 18px;}
P.titel { font-family: BeoFont; font-size: 18px; color: #f1f1f1; line-height: 14px; padding-top:16px; padding-bottom: 6px;}
P.swtitel { font-family: BeoFont; font-size: 17px; text-decoration: underline; color: #f1f1f1; line-height: 14px; padding-top:20px; padding-bottom: 6px;}
P.subtitel { font-family: BeoFont; font-size: 16px; color: #f1f1f1; line-height: 14px; padding-top:8px; padding-bottom: 6px;}
P.av {text-align:center;}
P.overview {text-align:left;}

.hidden, .hideable { display: none; }
.unhidden { display: block; }

.download {
width: 30px;
height: 30px;
}

IMG { border-style: none; max-width: 100%;}

#logo {
    float: left;
    max-height: 15px;
    top: 50%;
    position: absolute;
    transform: translate(0,-50%);
    margin: 0;
	left: 10px;

}

table { border-style:none; padding-bottom:16px;}
table.setup, td, tr, th {width:450px; border:1px solid black; padding:2px;}
table#updateversion { border-style:none; border: none;}
#updateversion td, #updateversion tr { border-style:none; border: none;}
tr.ttitel, td {text-align:center;}
td.av-td {width:20%;}
hr {float:left;width:250px;}

body {
    margin: 0;
    padding: 0;
    border: 0;
	font-family: BeoFont;
	font-size: 18px; 
	color: #E6E6E6;
}

.html_bg, #blurred-content-wrapper {
	background: url(../images/background.jpg) no-repeat center top fixed; 
	-webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
	background-attachment: fixed;
	overflow-y: scroll;
}

#page {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

/******** Top navigation CSS ********/

.nav-wrapper {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background:#eee;
	background:rgba(238,238,238,0.85);
	position: absolute;
	min-width: 1000px;
}
 
.topnav {
    width:700px;
    margin:0px 0px 0px auto;
	padding-left: 20px;
}
 
.topnav li {
    margin:0px;
    list-style:none;
	font-family: BeoFont;
}
 
.topnav a {
    transition:all linear 0.15s;
    color:#aaa;
}
 
.topnav li:hover > a, .topnav .selected > a {
    text-decoration:none;
    color:#eee;
}
 
.topnav .arrow {
    font-size:16px;
    line-height:0%;
}
 
/*----- Top Level -----*/
.topnav > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    font-size:19px;
}
 
.topnav > ul > li > a {
    padding:10px 30px;
    display:inline-block;
	color:#333;
	text-shadow:1px 1px 1px rgba(51,51,51,0.4);
}

 
.topnav > ul > li:hover > a, .topnav > ul > .selected > a {
    background:#2e2728;
}

.topnav > ul > li > a.selected {
    background:#2e2728;
	color:#FF8000;
}
 
/*----- Bottom Level -----*/
.topnav li:hover .sub-menu {
    z-index:11;
    opacity:1;
}
 
.sub-menu {
    width:170%;
	max-width:220px;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:2px 2px 3px rgba(0,0,0,0.3);
    background:#2e2728;
}
 
.sub-menu li {
    display:block;
    font-size:16px;
	text-align: left;
}
 
.sub-menu li a {
    padding:10px 30px;
    display: block;
    width: auto;
}

 
.sub-menu li a:hover, .sub-menu .selected a {
    background:#3e3436;
}


/******* Top menu CSS END ********/

.inner-page-wrapper {
	position: relative;
	width: 90%;
	height: auto;
	box-shadow:0px 2px 3px rgba(0,0,0,0.4);
	margin: 50px auto;
}

#blurred-content-wrapper {
/* Absolutely position it, but stretch it to all four corners, then put it just behind #inner-content-wrapper's z-index */
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	z-index: 9;
	-webkit-filter: blur(10px); /* Chrome, Opera, etc. */
	filter: url('/images/blur.svg#blur'); /* Older FF and others - http://jordanhollinger.com/media/blur.svg */
	filter: blur(10px); /* Firefox 35+, eventually all */

}

.inner-content-wrapper {
	position: relative;
	overflow: visible;
	float: left;
	width: 96.3%;
	z-index: 10;
	background: rgb(34,34,34); /* for IE */
	background: rgba(34,34,34,0.75);
	padding: 20px 60px;
}



.header {
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 99;
}

div.img-text { width: 350px; color: #000;}
span.img-text { font-size: 40px}
span.img-sub-text { font-size: 30px}
img.icon { width: 268px; height: 370px; max-width: 268px; max-height: 370px;}

.fixed-input { width: 243px; margin: 2px 0;}
.telephone { display: none; visibility: hidden; }
.outer-wrapper {
	position: relative;
	width: 100%;
}

.footer-wrapper  {
	position: fixed;
	left: 0px;
	bottom: 0px;
	width: 100%;
	text-align: center;
	margin: auto;
	background: rgb(34,34,34);
	background: rgba(34,34,34,0.8);
	z-index: 99;
}

.footer {
	width: 100%;
	height: 100%;
	padding:5px 0;
	text-align: center;
}


div#links { line-height: 17px; }
/******** POPUP divs *******/

div#links a span {display: none;}

div#links a:hover span {
display: block;
position:absolute;
top:90px;
left:400px;
width: 150px;
padding: 15px;
z-index: 10;
color: #000000; 
background: #f1f1f1;
text-align: left;
}


div#test a:hover span {
display: block;
position:absolute;
left:350px;
width: 200px;
padding: 5px;
z-index: 10;
color: #FF6600; 
background: #black;
text-align: left;
}


div#links a:hover span.ps_img {
display: block;
position:absolute;
top:80px;
left:450px;
padding: 15px;
z-index: 10;
background: none;
text-align: left;
}
/******** POPUP divs END *******/

@media screen and (min-width: 480px) {
    .inner-page-wrapper {
        width: 460px;
    }
	.inner-content-wrapper {
        width: 420px;
    }
}

@media screen and (min-width: 768px) {
    .inner-page-wrapper {
        width: 750px;
    }
	.inner-content-wrapper {
        width: 710px;
    }
}

@media screen and (min-width: 1000px) {
    .inner-page-wrapper {
        width: 980px;
    }
	.inner-content-wrapper {
        width: 940px;
    }
}

@media screen and (min-width: 1300px) {
    .inner-page-wrapper {
        width: 1280px;
    }
    .inner-content-wrapper {
        width: 1160px;
    }
}