@charset "utf-8";
/* CSS Document */

/* ########## GENERAL STYLES ########## */
html,body{
	padding:0px;
	margin:0px;
	
	width:100%;
	height:100%;
}
body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	line-height:16px;
	color:#333333;
	
	background:#c8c8c8;
}
a{
	color:#333333;
	font-weight:bold;
	text-decoration:underline;
	outline-width:0px;
}
a img{
	border:none;
}


/* ########## BASE STYLES ########## */
#container{
	position:relative;
	
	width:991px;
	height:799px;
	
	margin:10px auto 0px auto;
	
	background:url(images/bg_main.jpg) left top no-repeat;
}
#container #logo{
	position:absolute;
	left:332px;
	top:203px;
	
	width:344px;
	height:0px;
	
	padding:101px 0px 0px 0px;
	
	overflow:hidden;
	
	background:url(images/mediamarkt.png) left top no-repeat;
}
#container h2{
	display:inline-block;
	
	width:298px;
	height:0px;
	
	padding:81px 0px 0px 0px;
	margin:30px 0px 20px 0px;
	
	overflow:hidden;
	
	background-position:center top;
	background-repeat:no-repeat;
}
#container h3{
	display:inline-block;
	
	width:298px;
	height:0px;
	
	padding:19px 0px 0px 0px;
	margin:0px 0px 10px 0px;
	
	overflow:hidden;
	
	background-position:center top;
	background-repeat:no-repeat;
}


/* ########## BOX LEFT SIDE STYLES ########## */
#container #left{
	position:absolute;
	left:28px;
	top:281px;
	
	width:298px;
	height:0px;
	
	text-align:center;
}
#container #left h2.angebote{
	background-image:url(images/h2_vielfaeltige_angebote.png);
}
#container #left h3.taeglich{
	background-image:url(images/h3_taeglich_tief.png);
}


/* ########## BOX CENTER SIDE STYLES ########## */
#container #center{
	position:absolute;
	left:346px;
	top:281px;
	
	width:298px;
	height:0px;
	
	text-align:center;
}
#container #center h2.umfangreich{
	background-image:url(images/h2_umfangreiche_services.png);
}
#container #center h3.tun{
	background-image:url(images/h3_was_tun.png);
}


/* ########## BOX RIGHT SIDE STYLES ########## */
#container #right{
	position:absolute;
	left:663px;
	top:281px;
	
	width:298px;
	height:0px;
	
	text-align:center;
}
#container #right #slider{
	position:relative;
}
#container #right #slider ul#slides{
	position:absolute;
	left:0px;
	top:0px;
	
	padding:0px;
	margin:0px;
	
	list-style-type:none;
}
#container #right #slider ul#slides > li{
	padding:0px;
	margin:0px;
}
#container #right #slider ul#slides > li h2.vorteile{
	background-image:url(images/h2_weitere_vorteile.png);
}
#container #right #slider ul#slides > li h3.abholen{
	padding:39px 0px 0px 0px;
	margin:-10px 0px -3px 0px;
	
	background-image:url(images/h3_online_bestellen.png);
}
#container #right #slider ul#slides > li h3.jederzeit{
	background-image:url(images/h3_jederzeit_einfach.png);
}
#container #right #slider ul#slides > li h3.echter{
	background-image:url(images/h3_echter.png);
}
#container #right #slider ul#slides > li h3.persoenlicher{
	background-image:url(images/h3_persoenlicher.png);
}
#container #right #slider ul#controls{
	position:absolute;
	left:0px;
	top:302px;
	
	width:298px;
	
	padding:0px;
	margin:0px 0px 0px 0px;
	
	list-style-type:none;
	
	text-align:center;
}
#container #right #slider ul#controls > li{
	display:inline;
	
	padding:0px;
	margin:0px 6px 0px 0px;
}
#container #right #slider ul#controls > li img{
	background:url(images/dot_inactiv.png) left top no-repeat;
}
#container #right #slider ul#controls > li:first-child img{
	background:url(images/dot_activ.png) left top no-repeat;
}


/* ########## ARROW LINK STYLES ########## */
#container #onlineshop{
	position:absolute;
	left:223px;
	top:646px;
	
	width:555px;
	height:0px;
	
	padding:85px 0px 0px 0px;
	
	overflow:hidden;
	
	background:url(images/b_onlineshop.png) left top no-repeat;
}


/* ########## FOOTER STYLES ########## */
#container #impressum{
	position:absolute;
	left:25px;
	top:716px;
	
	width:0px;
	height:0px;
}


/* ########## LAYER STYLES ########## */
#layer{
	position:fixed;
	left:0px;
	top:0px;
	
	width:100%;
	height:100%;
	
	background-color:rgba(51,51,51,0.3);
}
#layer #inner{
	position:relative;
	
	width:585px;
	height:326px;
	
	padding:48px 40px 38px 26px;
	margin:10% auto 0px auto;
	
	background:url(images/layer.png) left top no-repeat;
}
#layer #inner a#close{
	position:absolute;
	top:5px;
	left:503px;
	
	width:130px;
	height:0px;
	
	padding:20px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	
	overflow:hidden;
}
#layer #inner h2{
	font-size:24px;
	color:#447315;
}
#layer #inner h3{
	font-size:14px;
	font-weight:bold;
	color:#000000;
}
#layer #inner p{
	font-size:14px;
	color:#000000;
}