@import url(featured_slide.css);

@media only screen{

body {	
	Font-Family : Century Gothic,Verdana,Arial,sans-serif;
	Color : #333333 ;
	margin:0;
	padding:0;
	font-size:14px;
	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;}
.imgl, .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;}
.imgwork{border:1px solid #666666; padding:2px; background-color:#EEE;float:left; margin:0 4px 4px 0;}
.imgoben{width:10px;height: 10px; vertical-align: middle;padding: 5px;}
.imgvoll {max-width: 90%; height: auto;}
.imgKontakt {float:right; margin:0 0 15px 15px; height: 200px; width: auto; clear:right;}

a	{outline:none; text-decoration:none;}

.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;}

.small {font-size: 12px; 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:#CC0000;}

h1, h2, h3 {
	margin:0 0 20px 0;
	padding:0;
	font-weight: normal;
	font-family: Century Gothic, 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;
}

/* ----------------------------------------------TEST-------------------------------------*/

header {
	background-color: yellow;
	width: 100%;
	float: left;
	border-bottom: 1px solid black;
}

#bereichlogo {
	color: white;
	background-color: limegreen;		
	display: block;
	padding: 0.5em;
	text-decoration: none;
	float: left;	
}
#bereichlogo {
	width: 100%;
}
#steuerung {
	float:right;
}
#steuerung li {
	list-style: none;
	float: left;
}
#steuerung a {
	display: block;
	height: 100%;
	width: 100%;
	padding: 0.5em;
	text-decoration: none;  /* keine Unterstreichung */
	color: white;  /* Schriftfarbe weiß */
	background-color: gray;   /* Hintergrundfarbe grau */
}	
#steuerung a:hover {
	color: black;
	background: orange;
}
	
.menue-button {
	background-color: darkblue;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	padding: 0.5em;
	color: white;
	cursor: pointer;
	text-decoration: none;
}

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

div.wrapper {
	display:block;
	width:100%;
	margin:0;
	text-align:left;
}

.colSlider  {	color:#333333; background-color:#EEEEEE;	
							box-shadow: 0 5px 5px #DDDDDD, 0 -5px 5px #DDDDDD;}
.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:80%;
	}
	
/* ----------------------------------------------Header-------------------------------------*/

#header{
	padding:20px 0;
	}

#header p{margin:0;padding:0;}

#header .fl_left{
	display:block;
	float:left;
	width:150px;
	}
#header .fl_right{
	display:block;
	float:right;
	width:750px;
	}

#header h1{
	margin:0;
	padding: 0;
	font-size:50px;
	border:none;
	}

#header h1 a{
	color:#FFFFFF;
	}

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

#topnav{
	padding:0;
	z-index:1000;
	width: 83%;
	}

#topnav img {
	border:0;
	vertical-align: middle ;
	margin:5px;
	height:14px;
	width:14px;
	display: none;
}

#topnav ul, #topnav li{
	margin:0;
	padding:6px;
	list-style:none;
	font-size:16px;
	}

#topnav li{
	float:left;
	margin:10px;
	padding:2px;
	border:1px dotted #CC0000;
	width: 13%;
	background-color: #EEEEEE;
	}

	
#topnav li a:hover{
	font-weight:bold;
	}
	
#topnav li.last{
	}
	
/* --------------------------------------- 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%;
	padding:20px;
	overflow:hidden;
	color:#333333;
	box-shadow: 5px 5px 10px grey;
	background-color:#EEEEEE;
	margin-bottom: 40px;
	}
/* ----------------------------------------------Content-------------------------------------*/


#content{
	display:block;	
	padding:20px 0;
	line-height:1.4em;
	font-family: Century Gothic, Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height:22px;
	}

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

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


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

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


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

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

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

/* ------------------------------------------ Referenzen -----------------------------------*/

#ref_content, #ref_content ul{
	display:block;
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
	}


#ref_content li{
	display:block;
	position:relative;
	float:left;
	width:180px;
	height:140px;
	margin:20px 2px 0 2px;
	color:#333333;
	overflow:hidden;
	text-align:center;
	font-size:12px;
	}

#ref_content li img{
	display:block;
	width:  150px;
	height: 100px;
	border:1px solid #666666; padding:2px;
        margin-left: 12px;
	}

.oben {
	width:  10px;
	height: 10px;
	vertical-align: middle;	padding: 5px;
}

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

#footer{
	padding:10px 0;
	border-top:1px solid #CC0000;
	}

#footer h1{
	text-align: center;
	padding: 0;
	font-size:110%;
	font-weight:bold;
	color:#333333;
	margin-bottom:5px;
}
#footer h2{
	text-align: center;
	padding-bottom:8px;
	font-size:80%;
	font-weight:normal;
	color:#333333;
	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;
	}

a:visited {
   	Font-Family : Century Gothic,Verdana,Arial,sans-serif ;  
	Color : #990000 ; Text-Decoration : None;}

a:active {
   	Font-Family : Century Gothic,Verdana,Arial,sans-serif ;  
	Color : #DD0000 ;  Font-Weight : Bold;}

a:hover {
   	Font-Family : Century Gothic,Verdana,Arial,sans-serif ;  
	Color :#990000 ; Font-Weight : Bold;}
}

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

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

#bilderleiste {
	width:90%;
	}
	
#topnav img {
	display: none;
}	

#topnav li:nth-child(4) {clear: both} 
.imgKontakt {text-align: left; float:none; margin:0 clear:all;} 
	
#topnav ul, #topnav li{
	margin:0;
	padding:1%;
	list-style:none;
	font-size:1.05em;
	}

#topnav li{
  width: 28%;
	float:left;
	margin:1%;
	border:1px solid #CC0000;
	background-color: #EEEEEE;
	}
	
}


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

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

#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;
}
#topnav li:nth-child(odd) {clear: both} 
#topnav img {
	display: none;
}

#topnav ul, #topnav li{
	margin:0;
	padding:1%;
	list-style:none;
	font-size:1.05em;
	}

#topnav li{
  width: 44%;
	float:left;
	margin:1%;
	padding: 1%;
	border:1px dotted #CC0000;
	background-color: #EEEEEE;
	}
    
.imgr {float: none; margin:0 0 15px 0; clear:all;}
.imgKontakt {float:none; margin:0 clear:all;}   
}