/* =====================================
Stylesheet "Holzwerkstatt Design"

Stand: Versehen der Galerie mit einem Lightebox-Effekt
Datum: 27.02.2014
Autor: Till Bantle
URL: http://www.holzwerkstatt-design.de

Aufbau: 1. Kalibrierung
		2. Allgemeine Styles
		3. Styles für Layoutbereiche
		4. Sonstige Styles
		 4.1 Lightbox2 Styles 
===================================== */

/* =====================================
   1. Kalibrierung
   ===================================== */

* { padding: 0; margin: 0; }

/* =====================================
   2. Allgemeine Styles
   ===================================== */
html { }

body {
	background-color: white;
	color: black;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
}

h1 { 
	font-size: 1em;
    padding-bottom: 10px;
    margin-top: 10px;  
}

h2 { 
	font-size: 0.9em; 
	padding-bottom: 10px;
	margin-top: 10px;
}

ul.liste { padding-left: 20px; }

address { text-align: center; }

/* ==================
   Hyperlinks      */
   
a { 
	text-decoration: none;
	outline: none;
}

a:link { color: black; }

a:visited { color: black; }


/* =====================================
   3. Styles für Layoutbereiche
   ===================================== */

#umschlag {
    overflow: hidden;
	background-color: white;
	color: black;	
	width: 640px;
	margin: 20px auto;
}

#kopfbereich {
	width: 600px;
    background-color: white;
	color: black;
	text-align: center; 
	border: 1px solid #778899;
	margin-top: 19px;
	margin-bottom: 30px;
	margin-left: 19px;
}

		
	#kopfbereich a:link,
	#kopfbereich a:visited,
	#kopfbereich a:hover,
	#kopfbereich a:active,

#navibereich {
	background-color: white;
	color: black;
	text-align: center;
}	
    #navibereich ul {
        white-space: nowrap;
        list-style-image: none;
		}

    #navibereich li {
    display: inline;
		list-style-type: none;
		padding: 10px 29px;
		border: 1px solid #778899;
		margin: 0;
		}
		
	#navibereich a:hover,
	#navibereich a:focus {
		border-bottom: 1px solid black; 
	}
    #navibereich a:active { 
    	background-color: white;
    	color: black;
   	}
    
#startseite #navi01,
#produktseite #navi02, 
#werkstattseite #navi03,
#galerieseite #navi04,
#kontaktseite #navi05 {
	background-color: #EFE0E2;
	color: black;	
}
#startseite #inhaltsbereich {
	background: url(tischler-bilder/shakerbett.jpg) no-repeat;
}
#produktseite #inhaltsbereich {
	background: url(tischler-bilder/shakerbett.jpg) no-repeat;	
}
#werkstattseite #inhaltsbereich {
	background: url(tischler-bilder/shakerbett.jpg) no-repeat;	
}
#kontaktseite #inhaltsbereich {
	background: url(tischler-bilder/shakerbett.jpg) no-repeat;	
}
#impressum #bildbereich02 {
	background: url(tischler-bilder/shakertisch.jpg) no-repeat;	
}
#inhaltsbereich {
	float: left;
	width: 600px;
	border: 1px solid #778899;
	margin-top: 30px;
	margin-bottom: 19px;
	margin-left: 19px;
}
#galerieseite #inhaltsbereich {
	width: 570px;
	height: 425px;
	padding: 10px 15px;	
}
#bildergalerie ul {
	list-style: none;
}
#bildergalerie li {
	display: inline;
	list-style-type: none;
	padding: 15px;
	float: left;
}
	#bildergalerie li a {
		border: 0;
	}

	#bildergalerie li img {
		padding: 5px;
		border: 1px solid #778899;
	}
#bildbereich01 {
	float: left;
	width: 174px;
	height: 445px;
			
}

#textbereich {
	float: left;
	height: 425px;
	width: 212px;
	padding: 10px 20px;
}

	#textbereich p { margin-top: 10px; }
  
    #textbereich li.valid {
   		display: inline;
		list-style-type: none;
 	}
    #textbereich li.valid img { 
    	margin-top: 10px;
    	border: 0;
    }
    
    #textbereich a { border-bottom: 1px solid black; }
    
    #textbereich strong { font-size: 0.8em; }
    
  
    #textbereich #kontaktdaten {
   		text-align: left;
	}
  
#bildbereich02 {
	float: left;
	width: 174px;
	height: 445px;
}

#fussbereich {
	float: left;
	width: 600px;
	border: 1px solid #778899;
	margin-bottom: 19px;
    margin-left: 19px;
}

	#fussbereich a.emailadresse {
    	color: blue;
        font-size: 12px;
        border: 0;
        outline: none;
	}
	#fussbereich a.impressumlink {
    	color: blue;
        font-size: 12px;
        border: 0;
        outline: none;
	}
  
#impressum p {
	font-family:  Helvetica, Verdana, Arial, sans-serif;
	font-size: 12px;
}

#impressum #textbereich {
	width: 386px;
}
#impressum #textbereich a {
	outline: none;
	border: 0;
}
#impressum #bildbereich02 {
	float: left;
}
#kontaktseite a.emailadresse {
      color: blue;
      font-size: 12px;
      border-bottom: 0;
      outline: none;
}


/* =====================================
   4. Sonstige Styles
   ===================================== */
   
.skiplink { 
	position: absolute;
	top: -50000px;
	left: -50000px;
	width: 0;
	height: 0;
	overflow: hidden; 
	display: inline;	
} /* erhöt die Accessibility im Bezug auf Barrierefreiheit */

/* =====================================
   4.1 Lightbox2 Styles 
   ===================================== */

#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;} /* verstehen das alle Browser? */
#hoverNav a { outline: none;}

#prevLink, #nextLink { width: 49%; height: 100%; /*background-image: url(data:image/gif;base64,AAAA);  Trick IE into showing hover nicht valid? */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(tischler-bilder/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(tischler-bilder/nextlabel.gif) right 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: 66px; 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; }

/* =====================================
   Kontaktformular Styles*/

/* =====================================

   Ende des Stylesheets
   ===================================== */