/* A universal CSS reset */
*{
	
	margin:0px auto;
	padding:0px;
}

body{
	max-width:980px;
	
	font-family: 'Roboto', sans-serif;
	background: #FBFBFB no-repeat;/*farbe hintergrund unterer bereich*/
	
	CSS3 Radial Gradients:
	background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
/*	background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));*/
	
	
	
}
.header {
	max-width: 960px;
	max-height: 115px;
	font-family: 'Roboto', sans-serif;

}
h1{
	width: 300px;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 50px;
	color: #909090;
	text-align: left;
	font-variant: small-caps;
	margin-left: 5px;
	margin-bottom: 0;
	position: static;

}

h2{
	width: 450px;
	font-family: 'Roboto', sans-serif;
	font-size: 30px;			
	font-weight: 500;
	text-align:right;
	color:#909090;
	margin-right: 5px;
	
	


}

.wrapper{
max-width: 960px;
height: 100%;
position: absolute;
}
#navigationMenu li{
	list-style:none;
	height:39px;
	padding:6px;
	width:40px;
}
#navigationMenu span{
	/* Container properties */
	width:0;
	right:38px;
	padding:0;
	position:absolute;
	overflow:hidden;
/* Text properties */
	font-family:'Roboto', sans-serif;
	font-size:18px;
	font-weight: 100;
	letter-spacing:0.6px;
	white-space:nowrap;
	line-height:39px;
	/* CSS3 Transition: */
	-webkit-transition: 0.55s;
	/* Future proofing (these do not work yet): */
	-moz-transition: 0.15s;
	transition: 0.15s;
}
#navigationMenu a{
	background:url('img/navigation.jpg') no-repeat;
	height:39px;
	width:38px;
	display:block;
	position:relative;
}
/* General hover styles */
#navigationMenu a:hover span{
	 width:auto;
	 padding:0 20px;
	 overflow:visible; }
#navigationMenu a:hover{
	 text-decoration:none;
	
	/* CSS outer glow with the box-shadow property */

	 box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .start {	background-position:0 0;}
#navigationMenu .start:hover {	background-position:0 -39px;}
#navigationMenu .start span{
	background-color:#7da315;
	color:#fff;
	text-shadow:1px 1px 0 #99bf31;
	opacity: 0.9;
}

/* Blue Button */

#navigationMenu .information { background-position:-38px 0;}
#navigationMenu .information:hover { background-position:-38px -39px;}
#navigationMenu .information span{
	background-color:#1e8bb4;
	color:#fff;
	text-shadow:1px 1px 0 #44a8d0;
	opacity: 0.9;
}

/* Orange Button */

#navigationMenu .leistungen { background-position:-76px 0;}
#navigationMenu .leistungen:hover { background-position:-76px -39px;}
#navigationMenu .leistungen span{
	background-color:#c86c1f;
	color:#fff;
	text-shadow:1px 1px 0 #d28344;
	opacity: 0.9;
}

/* Yellow Button */

#navigationMenu .ueber { background-position:-114px 0;}
#navigationMenu .ueber:hover{ background-position:-114px -39px;}
#navigationMenu .ueber span{
	background-color:#d0a525;
	color:#fff;
	text-shadow:1px 1px 0 #d8b54b;
	opacity: 0.9;
}

/* Purple Button */

#navigationMenu .kontakt { background-position:-152px 0;}
#navigationMenu .kontakt:hover { background-position:-152px -39px;}
#navigationMenu .kontakt span{
	background-color:#af1e83;
	color:#fff;
	text-shadow:1px 1px 0 #d244a6;
	opacity: 0.9;
}
.examplestart {
    position:relative;
    background:url(img/start.z.jpg);
    width: 960px;
    height: 590px ;
    margin: 0px auto;
  	 padding: 0px;
    border: gray solid 10px;
    border-radius:20px;
}
.examplefollow{
	 position:relative;
    background: url(img/kaufhaus_fin.jpg);
    max-width: 960px;
    height: 590px ;
    margin: 0px auto;
    padding: 0px;
    border: gray solid 10px;
    border-radius:20px;
 }
.boxen ul{
	padding: 0px;
	margin: 0px;
	position: static;
}
.boxen li{
	margin:0px auto;
	list-style-type: none;
}
/* über*/
.box1{
	max-width: 520px;
	height: 300px auto;
	border: 5px solid #E8B532;
	border-radius: 10px;
	font-family: Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	padding-right: 15px;
	margin-left: 85px ;
	margin-top: 25px;
	position: absolute;
	text-align: justify;
	color:#3E3312; 
	background-color:#E6E6E6;
	opacity: 0.9;
}
.box1  a{
	text-decoration: none;
	background-color:#CD0000;
	border: 8px double orange;
	color: white;
	border-radius: 7px;
	position: relative;
	padding: 7px 7px 7px 7px;
	float: right;
}
.box1 a:hover{
	color: black;
	background-color: white;
}
/*foto*/
.box2{
	width: 252px;
	height: 300px;;
	margin-top: 25px;
	border: 5px solid #E357B9;
	border-radius: 10px;
	padding-top: 0px;
	float: right;
	position: relative;
	
}
.box20{
	width: 252px;
	height: 300px;
	border: 5px solid #E8B532;
	border-radius: 10px;
	margin-top: 25px;
	margin-right: 10px;
	padding-top: 0px;
	float: right;
	position: relative;
	opacity: 0.9;
}

/*info*/
.box3{
	width: 580px;
	height: 300px auto;
	border: 5px solid #1e8bb4;
	border-radius: 10px;
	font-family:Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #032533;
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 15px;
	margin-left: 90px ;
	margin-top: 25px;
	position: absolute;
	background-color: #E6E6E6;
	opacity: 0.9;
}
.box3  a{
	margin-bottom: 15px;
	text-decoration: none;
	background-color:#CD0000;
	border: 8px double orange;
	color: white;
	border-radius: 7px;
	position: relative;
	padding: 7px 7px 7px 7px;
	float: right;
}
.box3 a:hover{
	color: black;
	background-color: white;
}
/*antworten*//*
.box4{
	width: 800px;
	height: 100%;
	border: 10px solid #1e8bb4;
	
	font-family:'Myriad Pro', Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #033042;
	
	padding-left: 15px;
	padding-right: 15px;
	margin-left: 150px ;

}
.box4  a{
		text-decoration: none;
	background-color: transparent;
	border: #FF4207 2px solid;
	color: #EA4900;
	border-radius: 10px;
position: relative;
	padding: 2px 5px 2px 5px;
	float: right;
	
}
.box4 a:hover{
	color: yellow;
	background-color: #9F0000;
}*/
/*kontakt*/
.box5{
	width: 580px;
	height: 300px auto;
	border: 5px solid #E357B9;
	border-radius: 10px;
	font-family: Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #5D073E;
	padding-bottom: 15px;
	padding-top: 15px;
	padding-left: 15px;
	margin-left: 220px ;
	margin-top: 25px;
	float: left;
	position: absolute;
	background-color: #E6E6E6;
	opacity: 0.8;
}
.box5  a{
	margin-bottom: 5px;
	text-decoration: none;
	background-color:#CD0000;
	border: 8px double orange;
	color: white;
	border-radius: 7px;
	position: relative;
	padding: 7px 7px 7px 7px;
	float: right;
}
.box5 a:hover{
	color: black;
	background-color:white;
}
/*impressum*/
.box6{
	width: 780px;
	height: 300px auto;
	border: 5px solid #E357B9;
	border-radius: 10px;
	font-family:Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #033042;
	padding-bottom: 15px;
	padding-left: 15px;
	padding-right: 15px;
	margin-left: 90px ;
	margin-top: 5px;
	position: absolute;
	background-color: #E6E6E6;
	opacity: 0.9;
}
.box6  a{
	margin-bottom: 5px;
	text-decoration: none;
	background-color:#CD0000;
	border: 8px double orange;
	color: white;
	border-radius: 7px;
	position: relative;
	padding: 7px 7px 7px 7px;
	float: right;
}
.box6 a:hover{
	color: black;
	background-color: white;
}
/*leistungen*/
.box7{
	width: 780px;
	height: 300px auto;
	border: 5px solid #c86c1f;
	border-radius: 10px;
	font-family:Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #462000;
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 15px;;
	margin-left: 90px ;
	margin-top: 25px;
	position: absolute;
	background-color: #E6E6E6;
	opacity: 0.9;
}
.box7  a{
	margin-bottom: 5px;
	text-decoration: none;
	background-color:#CD0000;
	border: 8px double orange;
	color: white;
	border-radius: 7px;
	position: relative;
	padding: 7px 7px 7px 7px;
	float: right;
}
.box7 a:hover{
	color: black;
	background-color: white;
}
.footer{
	font-size: 13px;
	color: gray;
	margin-left: 15px;

}