@import url(featured_slide.css);

@media only screen{

body {	
	Font-Family : Arial,sans-serif;
	Color : black ;
	margin:0;
	padding:0;
	font-size:12px;
	background-color:white;   
	
	scrollbar-face-color:#FFFFFF;
	scrollbar-highlight-color:#FFFFFF;
	scrollbar-3dlight-color:#AA0000;
	scrollbar-darkshadow-color:#000000;
	scrollbar-shadow-color:#6C0000;
	scrollbar-arrow-color:#000000;
	scrollbar-track-color:#E0E0E0;
}

/* ------------------------------------------- Allgemein -------------------------------------*/

img 	{border:0; padding:0; margin:5px;}
.imgmid	{border:0; vertical-align: middle ; margin:5px;}
.imgr, .imgKontakt{border:1px solid #666666; padding:5px; color:#666666; background-color:#FFFFFF;}
.imgl	{float:left;  margin:0 15px 0 0;    clear:left;}
.imgr	{float:right; margin:0 0 15px 15px; clear:right;}
.imgoben{width:10px;height: 10px; vertical-align: middle;padding: 5px;}
.imgvoll {max-width: 90%; height: auto;}
.imgTeam {	height:auto;	width: 100%;
		border:1px solid #FF8811; 
		box-shadow:5px 5px 10px grey;  
		margin:10px 10px 30px 0;}
.imgwork{
		height:200px;
		width: auto;
		border:1px solid #FF8811; 
		box-shadow:5px 5px 10px grey;  
		margin:10px 10px 30px 0;
		float: left; }
		
.imghide{
		height:200px;
		width: auto;
		border:1px solid #FF8811; 
		box-shadow:5px 5px 10px grey;  
		margin:10px 10px 30px 0; 
		float: left; }

a		{outline:none;  Text-decoration : none; color:#333; font-weight: normal;}
a:visited 	{Color : #333 ; Text-Decoration : None;}
a:active 	{Color : #333 ; Font-Weight : Bold;}
a:hover 	{Color : #333 ; Font-Weight : Bold;}


.justify{text-align:justify;}
.bold	{font-weight:bold;}
.left	{text-align:left;}
.center	{text-align:center;}
.right	{text-align:right;}
.nostart{list-style-type:none; margin:0; padding:0;}
.clear	{clear:both;}
.clearfix {overflow: auto; zoom: 1;}
.fl_left  {float:left;}
.fl_right {float:right;}
.white	{ background-color: white;}
.small {font-size: 11px; line-height :16px;}
.form {background-color:white; border-width:1px; border-color:rgb(157,0,0); border-style:dotted;font-size:12px;}

hr {height: 1px; color:#FF8811;}

h1, h2, h3 {
	margin:0 0 20px 0;
	padding:0;
	font-weight: normal;
	font-family: Verdana, Arial, sans-serif;
}

h1 {	
	padding-top:10px;
	font-size: 18px;
	line-height: 26px;
	text-align: center;
}


h2{
	font-size:16px;
}

h3{
	font-size:14px;
	font-weight: bold;
	line-height: 22px;
}
td {
	font-size:12px;
}


/* ----------------------------------------------Wrapper-------------------------------------*/

div.wrapper {
		display:block;
		width:100%;
		margin-top:10px;
		text-align:left;
		background-color: white;
}


.colimages  {	color:#333333; background-color:#EEEEEE;
		box-shadow: 0 5px 5px #DDDDDD, 0 -5px 5px #DDDDDD;}

/* ----------------------------------------------Generalise-------------------------------------*/

#header, #topnav, #textleiste, #bilderleiste, #content, #footer{
	position:relative;
	margin:0 auto 0;
	display:block;
	width:950px;
	}
	
/* ----------------------------------------------Header-------------------------------------*/


#header img {width:100%; height: auto;}
#header h1 {margin: 0px; padding:0px;}


/* ----------------------------------------------Navigation-------------------------------------*/


#topnav ul, #topnav li{
	padding:0 20px 0 0;
	list-style:none;
	font-size:14px;
	}

#topnav li{
	float:left;
	margin:0 0 0 15px;
	padding:2px 10px 4px 10px;
	border:1px solid grey;
	background-color: #FF8811;
	box-shadow: 2px 2px 10px grey;
	}

#topnav li a{
	color:#333333;
	}
	
#topnav li a:hover{
	font-weight: bold;
	}
	
#topnav .aktiv {
	font-weight: bold;
	background-color: #F6E5D4;	
}

/* --------------------------------------- Leisten --------------------------------------*/

#bilderleiste {
	width:80%;
	padding:0;
	overflow:hidden;
	color:#333333;
	background-color:#EEEEEE;
	text-align: center;
	margin-top: 0px; 
	margin-bottom: 20px;
	}

#textleiste {
	width:80%;
	padding:0;
	padding-top:15px;
	overflow:hidden;
	color:#333333;
	background-color:#EEEEEE;
	margin-top: 30px; 
	margin-bottom: 20px;  
	}

#grau {
	display:block;
	width:95%;
	overflow:hidden;
	padding:20px;
	color:#333333;
	box-shadow: 5px 5px 10px grey;
	background-color:#EEEEEE;
	margin-bottom: 40px;
	}
#weiss {
	display:block;
	width:95%;
	overflow:hidden;
	background-color:white;
	}

#Wochenkarte {
	display:block;
	width:95%;
	color:white;
	border: 3px solid #FF8811;
	box-shadow: 5px 5px 10px grey;
	background-color:#333;
	padding: 0 10px 0 10px;
	}
	
#Wochenkarte h4{
	font-weight: bold;
	Font-Family : Verdana, Arial;
	font-size: 16px;
	margin-bottom:-10px;
	}
#Waschblock {
	display:block;
	width:28%; 
	height: 250px;
	padding:0 0 0 20px;
	float: left;
	border: 1px solid #FF8811;
	box-shadow: 5px 5px 10px grey;
	margin:10px;
	background-color: #F6E5D4;
	}
#Waschblocko {
	display:block;
	width:28%; 
	height: 370px;
	padding:0 0 0 20px;
	float: left;
	border: 1px solid #FF8811;
	box-shadow: 5px 5px 10px grey;
	margin:10px;
	background-color: #F6E5D4;
	}
#Waschblocku {
	display:block;
	width:28%; 
	height: 250px;
	padding:0 0 0 20px;
	float: left;
	border: 1px solid #FF8811;
	box-shadow: 5px 5px 10px grey;
	margin:10px;
	background-color: #F6E5D4;
	}
#aktuell {

	display:block;
	width:100%;
	padding:10px 0 10px 0;
	background-color: #F6E5D4;
	font-size: 14px;
	text-align: center;
}

#news {
	display:block;
	width:95%;
	padding:20px 0 0 20px;
	margin: 10px;
	background-color: #FF8811;
	font-size: 14px;
	text-align: left;
}

/* ----------------------------------------------Content-------------------------------------*/


#content{
	display:block;	
	line-height:1.4em;
	font-size:13px;
	line-height:18px;
	}
	

#content h1 {
	font-size: 18px;
	font-weight: normal;
	text-align: center;
}

#content li {
	list-style-image:url('Bilder/bullit.png');
	line-height:22px;
}


#content h2{
	font-size:14px;
	text-align: center;
	font-weight: normal;
	color: 333333;
	}

#content h3{
	font-size:16px;
	font-weight: bold;
	}

#content h4{
	font-size:12px;
	font-weight: bold;
	margin-bottom:0px;
	}	


/* --------------------------------------- 2 Spalten --------------------------------------*/

#colall {
	display:block;
	width:98%;
	margin-left:15px;
	float: left;
	line-height:18px;
	font-size:13px;
	text-align: left;
}

#colleft {
	display:block;
	width:45%;
	padding:0;
	margin-left:2%;	
	float: left;
	line-height:18px;
	font-size:13px;
	text-align: left;
}

#colright {
	display:block;
	width:44%;
	padding:0;
	float: right;
	margin-right:2%;
	line-height:18px;
	font-size:13px;
	text-align: left;
}

/* ----------------------------------------------Footer-------------------------------------*/

#footer{
	background-image: url(Bilder/orange.jpg);
	box-shadow: 2px 2px 10px grey;
	}

#footer h1{
	text-align: center;
	padding-top: 10px;
	font-size:14px;
	font-weight:bold;
	color:black;
	margin-bottom:0px;
	text-align:center;
}
#footer h2{
	text-align: center;
	padding-bottom:10px;
	font-size:11px;
	font-weight:normal;
	color:black;
	margin-bottom:10px;
	}

#footer p, #footer ul, #footer a{
	margin:0;
	padding:0;
	font-weight:normal;
	list-style:none;
	line-height:normal;
	color:#333333;
	}

#footer li{margin-bottom:3px;	}

#footer a:hover{font-weight:bold;	}


}

/* ---------------------------------------------- Tablet -------------------------------------*/

@media only screen and ( min-width: 440px ) and ( max-width: 950px ) 
{    /* Tablets und mittlere Bildschirme */

#header, #topnav, #footer, #content {width : 100%;}

#header img {width:100%; height: auto;}

#topnav ul, #topnav li{
	list-style:none; font-size:1.1em; width: auto; margin-bottom:10px;
	}
	
#colall {
		width:95%; margin-left:15px;float: left;
}
	
#Waschblock {
	width:270px; 
	height: 250px;
	}	

#Waschblocko {
	width:90%; 
	}
#Waschblocku {
	width:90%; 
	}
.imgKontakt {text-align: left; float:none; margin:0 clear:all;} 

.imgwork{ margin:10px 0 30px 20px; }
.imghide{ margin:10px 0 30px 20px; }
 		
#featured_slide {	width:85%;	}

}
/* ---------------------------------------------- Mobile -------------------------------------*/

@media only screen and ( max-width: 440px ) 
{    /* mobile Geräte */

#header, #topnav, #footer, #content {width : 100%;}

#header img {width:100%; height: auto;}

#topnav ul, #topnav li{
	list-style:none; font-size:1.1em; width: auto; margin-bottom:10px;
	}

#content {padding: 0 10px 0 10px;}

#footer .fl_left {display:none;}
#bilderleiste {width:100%;}

.logo {width:100%; height:auto;}
.ref	{width:100%; height:auto;}
.brief{width:45%; height:auto;}

#colleft {
	display:block;
	width:90%;
	padding:0;
	margin-left:1%;	
	float: left;
	line-height:18px;
	font-size:13px;
	text-align: left;	}

#colright {
	display:block;
	width:90%;
	padding:0;
	float: left;
	margin-right:1%;
	line-height:18px;
	font-size:13px;
	text-align: left;	}

#colall {
	width:90%;
	margin-left:15px;
	float: left;
}


#Waschblock {	width:270px; 	height: 250px;	}
#Waschblocko {	width:90%; 	}
#Waschblocku {	width:90%; 	}
	
#topnav ul, #topnav li{	list-style:none; font-size:1.1em; width: auto; margin-bottom:10px;	}
    
.imgr {float: none; margin:0 0 15px 0; clear:all;}
.imgKontakt {float:none; margin:0 clear:all;}   
.imgwork{ border:1px solid #FF8811; 
	float:left; 
	width:90%; height:auto; 
	box-shadow:5px 5px 10px grey; 
	margin: 10px 0 30px 10px;}
.imghide { display: none;}
	
#featured_slide {width:70%;	}	
	
}