/*  =========================================================
Stylesheet Mengel-Eppelmann
Stand:  
Datei:  bildschirm.css
Media:  screen 
Datum:  September 2010
Autor:  Christian Bauer
Aufbau  1. Kalibrierung und allgemeine Styles 
        2. Styles Layoutbereiche    
        3. Sonstige Styles 
========================================================== */

/* ====================================== 
   1. Kalibrierung und allgemeine Styles 
   ====================================== */

/* Kalibrierung der wichtigsten Abst\344nde */
*  { padding: 0; margin: 0; }
h1, h2, h3, p, ul, ol { margin-bottom: 0.5em; }  
ul ul { margin-bottom: 0; } 
li { margin-left: 1em; } 

/* Allgemeine Selektoren */

html { height: 101%; } 
body {
	background: #dfdabd;
	color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
}
h1 { font-size: 140%; } 
h2 { font-size: 125%; }
h3 { font-size: 110%; }
address {
   text-align: center;  
   font-size: 60%;      
   font-style: normal;  
   letter-spacing: 2px; 
   line-height: 1.5em;  
}

/* Hyperlinks

a { text-decoration: none; outline: none;} 
a:link { color: #d90000; } 
a:visited { color: #cc6666; }
a:hover, 
a:focus { 
  border-bottom: 1px solid #d90000
}
 =======> nicht aktiv*/
 a img {
	border: 0;
}

/* Allgemeine Klassen und IDs */
.skiplink { 
   position: absolute; 
   left: -3000px; 
   top: -2000px; 
   width: 0px; 
   height: 0px; 
   overflow: hidden; 
   display: inline; 
}

.clearing { clear: both; }
#logo { 
   color: black;
   background-color: white;
   padding: 5px;
   border: 5px solid #d9d9d9; 
}

/* ==================================== 
   2. Styles für die  Layoutbereiche 
   ==================================== */

#wrapper { 
   color: black; 
   background: #e6e6e6;
   border: 1px solid #ccc;
   width: 833px;  
   margin: 0px auto 5px auto;
}

/* ==================================== 
   Kopfzeile
   ==================================== */
#kopfzeile { 
	width: 833px;  
	margin: 10px auto 0px auto;
	text-align: right;
}

#kopfzeile ul { 
	margin-bottom: 5px; 
}

#kopfzeile li{
   	display: inline;
   	list-style-type: none;
}  
   
#kopfzeile a {
	font-family: "Yanone Kaffeesatz", arial, non-serif;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-size: 11px;
	color: #8d847b;
	text-decoration: none;
	}    
	

   #kopfzeile a:hover,
   #kopfzeile a:focus { 
      color: white;
   } 	

/* ==================================== 
   Kopfbereich
   ==================================== */
#kopfbereich {
   position: relative;  
   color: black; 
   background: #fafafa;
   margin-bottom: 1px;
}
  
/* ==================================== 
   Navibereich oben
   ==================================== */
    #navibereich_oben {
	text-align: right;
	letter-spacing: 0.5em;
	color: white;
	background: #3a3225;
	padding: 7px 10px 7px 10px;
   }
   #navibereich_oben ul {
   	margin-bottom: 0;
   }
   #navibereich_oben li {
   	display: inline;
   	list-style-type: none;
   	margin: 0;
   }   
   #navibereich_oben a {
	font-family: "Yanone Kaffeesatz", arial, non-serif;
	font-weight: 700;
	line-height: 1em;
	font-style: normal;
	letter-spacing: 0.5em;
	font-size: 17px;
	color: #8d847b;
	text-decoration: none;
	padding: 4px 4px;
   }  
   
   .gs #navi_o_01 a,
   .wgt #navi_o_02 a,
   .secco #navi_o_03 a,
   #navibereich_oben a:hover,
   #navibereich_oben a:focus { 
      color: white;
   } 
   
   
/* ==================================== 
   Navibereich navibereich_links
   ==================================== */	
   #navibereich_links {
   float: left; 
   width: 155px; 
   text-transform: uppercase;

   } 
   
   #navibereich_links ul { 
      width: 155px; 
}
   #navibereich_links li {
	  font-family: "Yanone Kaffeesatz", arial, serif;
	  line-height: 1em;
	  font-weight: 600;
	  font-style: normal;
	  letter-spacing: 0.15em;
	  font-size: 16px;
      list-style-type: none; 
      margin: 0;
   }
   
   #navibereich_links a { 
      display: block; 
      text-decoration: none;
	  background-image: url(pics/navi_li.gif);
      color: #c5c5c5;
	  border-top: 1px solid white; 
      padding: 15px 0 7px 5%;
   }  
   
   #navibereich_links a:hover,
   #navibereich_links a:focus,
   #eins #navi_li_01 a,
   #zwei #navi_li_02 a,
   #drei #navi_li_03 a,
   #vier #navi_li_04 a,
   #fuenf #navi_li_05 a,
   #sechs #navi_li_06 a,
   #sieben #navi_li_07 a,
   #acht #navi_li_08 a,
   #neun #navi_li_09 a { 
      color: white;
   }  
   
   #navibereich_links a:active { 
      color: #3a3225; 
   }  
   
   #navi_abschluss{
   	height: 72px;
   	background: url(pics/abschluss.gif) no-repeat center bottom;
   	padding-bottom: 6px;
   }

/* ==================================== 
   Textbereich
   ==================================== */
#inhalt { 
   padding: 20px 10px 20px 5px; 
   margin-left: 190px; 
}
   #inhalt a { 
      border-bottom: 1px dotted #cc0000; 
   }
   #inhalt a:hover,
   #inhalt a:focus { 
      border-bottom: 1px solid #d90000; 
   }

#inhalt li { 
	line-height:1.5em;
	list-style-type: disc;
	margin-left: 18px
}

#inhalt table {
	line-height: 20px;
}

#inhalt h1 {
	font-family: "Yanone Kaffeesatz", arial, serif;
	color: #8d847b;
	letter-spacing: 0.2em;
	text-transform: uppercase;	
	margin-top: 2px;  
}

#inhalt h2 {
	font-family: "Yanone Kaffeesatz", arial, serif;
	color: #8d847b;
}

#inhalt span {
   float: left; 
   margin-bottom: 15px;  
}



     
/* Textbereich mit Bildern */
div.textblock { 
   overflow: hidden; /* zum Umschlie\337en der Floats */
   padding: 5px 5px 10px 0; 
   margin: 0 15px 20px 0; 
}

div.textblock img { 
   float: right; 
   margin-left: 25px; 
   margin-bottom: 10px;  
}

/* f\374r IE6 */
* html div.textblock { height: 1%; }

/* Textbereich hinterlegt */
div.textblock_color { 
   overflow: hidden; /* zum Umschlie\337en der Floats */
   padding: 15px; 
   margin: 0px 15px 20px 0px;
   background-color: #CCC;
   background-image: url(pics/textblock_color.gif)
}

div.textblock_color img { 
   float: right; 
   margin-left: 25px; 
   margin-bottom: 10px;  
}


/* f\374r IE6 */
* html div.textblock_color { height: 1%; }

/* Textbereich Bild links hinterlegt */
#textblock_color_left { 
   overflow: hidden; /* zum Umschlie\337en der Floats */
   padding: 15px; 
   margin: 0px 15px 20px 0px;
   background-color: #CCC;
   background-image: url(pics/textblock_color.gif)
}

#textblock_color_left img { 
   float: left; 
   margin-right: 25px; 
}


/* f\374r IE6 */
* html div.textblock_color_left { height: 1%; }

/* Bildergalerie */
div.bildergalerie { 
   overflow: hidden; /* zum Umschlie\337en der Floats */
   margin-bottom: 3em;
}

div.bildergalerie img { 
   float: left; 
   margin: 0 5px 5px 0;  
}



/* Bildunterschrift */
div.bildunterschrift_left {
float: left;
width: 105px;
height: 170px;
margin-right: 50px;
margin-bottom: 15px;
}

div.bildunterschrift_left h2{
margin-top: 10px;
}

/* ==================================== 
   Fussbereich
   ==================================== */
#fussbereich {
   clear: both; 
   color: white; 
   background-color: #8d847b; 
   padding: 10px 20px 12px 20px;
   border-top: 1px solid #8c8c8c; 
/*   margin-top: 20px; entfernen */
}

/* ==================================== 
   3. Sonstige Styles 
   ==================================== */

/* Das Kontaktformular */
form {
   background-color: #CCC;
   width: 370px; /* Breite des Formulars */ 
   padding: 20px; 
   border: 1px solid #8c8c8c;
   margin-bottom: 15px;
   background-image: url(pics/textblock_color.gif)
}
/* Beschriftung auf eigener Zeile */
label { 
   display: block; 
   cursor: pointer; 
} 
input#betreff,
input#absender,
input#email,
input#nachricht, 
textarea { 
   width: 300px;
   border: 1px solid #8c8c8c;
   margin-bottom: 1em;
}
textarea { 
   height: 7em; 
}
input#betreff:focus,
input#absender:focus,
input#email:focus,
input#nachricht:focus,
 
textarea:focus {
   background-color: #d9d9d9; 
}



/* Thickbox Bildunterschrift fuer Popup*/
div.bildunterschrift_thickbox {
padding: 0;
margin: 10px 5px 0px 10px;
float: left;
width: 400px;
}

div.bildunterschrift_thickbox img {
	margin-bottom: 10px;
}

/* Start Lightbox füt Popup */
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) 0 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) 100% 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 113px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
/* Ende Lightbox füt Popup */


/* ======================================= 
   E N D E   D E S   S T Y L E S H E E T S 
   ======================================= */