﻿/* Layout für www.kaihuesgen.de */

html, body {
	margin:0px;
	padding:0px;
	background:#333 url("layout/browser_hintergrund.jpg") repeat-x;
	font-family:Verdana, sans-serif;
	font-size:10pt;
	line-height:1.3em;
	color:#000;
	text-align:center;	/* Gesamte Seite zentrieren im IE */
}

.datum {
	font-size:0.6em;
	line-height:1em;
	text-align:right;
	margin:0px;
}

.logo {
	margin:0;
	padding:0;
	width:762px;
	height:140px;
}

.headshot {
	margin:0;
	padding:0;
	width:260px;
	height:380px;
	border:1px solid #fff;
}

.referenz_rory {
	margin:0;
	padding:0;
	width:200px;
	height:130px;
	border:1px solid #fff;
	float:left;
	margin:0 12px 8px 0;
}

.referenz_lucy {
	margin:0;
	padding:0;
	width:200px;
	height:130px;
	border:1px solid #fff;
	float:left;
	margin-top:8px;
}

.oceano {
	margin:0;
	padding:0;
	width:260px;
	height:107px;
	border:1px solid #fff;
}

.mitte {
	text-align:center;
}

hr {
	padding:0;
	margin-bottom:8px;
	height:1px;
	color:#CCC;
	border-bottom:0;
}

p {
	padding:0;
	margin:0px 0 8px 0;
}

h1 {
	font-size:1.4em;
	font-variant:small-caps;
	font-weight:bold;
	margin:0px 0px 16px 0px;
}

h3 {
	font-size:1.1em;
	font-weight:bold;
	margin:0px 0px 12px 0px;
}

a:link { 
	color:#900; 
	text-decoration:none;
}

a:visited {
	color:#600; 
	text-decoration:none; 
}

a:hover { 
	color:#933; 
	text-decoration:underline;
}
a:active { 
	color:#933; 
	text-decoration:underline;
}

a:focus { 
	color:#933; 
	text-decoration:underline;
}

#video_player {
	text-align:center;
}

/* --- LAYOUT --- */

#gesamteseite {
	padding:0;
	margin-left:auto;	/* Seite zentrieren in Firefox und Opera */
	margin-right:auto;	/* Seite zentrieren in Firefox und Opera */
	margin-top:10px;
	margin-bottom:10px;
	width:764px;
	background:#fff url("layout/seite_hintergrund.gif") repeat-y;
	border:1px solid #666;
	text-align:left;
}

#kopfzeile {
	margin:0;
	padding:0;
	width:762px;
	height:140px;
	background-color:#000;
	color:#999;
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	border-left:1px solid #fff;
}

#linkespalte {
	margin:0px;
	padding:0px;
	width:300px;
	float:left;
	font-size:0.8em;
	min-height:350px;
}

#linkespalte-abstand {
	margin:16px 12px 10px 18px;
}

#rechtespalte {
	margin:0;
	padding:0;
	width:464px;
	float:right;
}

#rechtespalte-abstand {
	margin:16px 12px 10px 16px;
}

#hintergrund_links {
	margin:0px;
	padding:0px;
	/* background:#ccc url("layout/browser_hintergrund.jpg") repeat-x; */
	background-color:#aaa;
	font-family:Verdana, sans-serif;
	font-size:10pt;
	line-height:1.3em;
	color:#000;
	text-align:center;	/* Gesamte Seite zentrieren im IE */
}

/* NEWSBOX wird nicht mehr gebraucht */

#newsbox {
	margin:0px 0px 5px 5px;
	padding:4px;
	background-color:#fff;
	border:1px solid #999;
	font-size:0.8em;
	line-height:1.2em;
	text-align:left;
	width:170px;
	max-height:140px;
	float:right;
	overflow:auto;
}

#fusszeile {
	margin:0;
	padding:0;
	clear:both;
	width:764px;
	height:31px;
	border-bottom:1px solid #fff;
}

#fusszeile-abstand {
	margin:10px 10px 3px 2px;
}

#valid-html {
	width:160px;
	float:left;
	text-align:left;
	margin-left:10px;
}

#valid-html img {
	border:none;
}

#kennung {
	width:500px;
	float:right;
	text-align:right;
	font-size:0.8em;
}

/* --- Angaben für die Galerie --- */

#galerie {
	margin:0;
	padding:0;
	width:260px;
	height:410px;
	border:none;
	background-color:#aaa;
	color:#000;
	text-align:left;
	font-size:0.8em;
}

#photoframe {
	margin:0;
	padding:0;
	width:440px;
	height:450px;
	border:none;
	background-color:#eee;
}

.thumbnail {
	margin-bottom:2px;
	padding:0;
	border:1px solid #666;
}

/* --- Angaben für den Kalender --- */

#kalender {
	margin:0;
	width:260px;
	height:400px;
	border:none;
	background-color:#aaa;
	color:#333;
}

#kalendernav {
	border:none;
	background-color:#eee;
	font-size:0.8em;
	line-height:1.3em;
	width:260px;
}

#kalenderblatt {
	border:none;
	background-color:#eee;
	font-size:0.8em;
	line-height:1.3em;
}

#kalenderblatt thead td {			/* Wochentage */
	background-color:#ccc;
}

#kalenderblatt tfoot td {			/* Fußnoten */
	background-color:#ccc;
}

#kalenderblatt tbody td{			/* Daten */
	background-color:#fff;
	width:35px;
	height:36px;
}


#navigation {
	margin:0;
	padding:0;
	width:763px;
	height:50px;
	background-color:#000;			/* Hintergrundfarbe für den Fall, dass keine Bilder dargestellt werden */
	border-left:1px solid #fff;		/* linker Rand zur Seite, rechte Seite über #nav li */
}

#nav {
	list-style:none;
	float:left;
	margin:0;
	padding:0;
}

#nav li{
	float:left;
	width:104px;
	padding-top:29px;
	padding-bottom:3px;	
	padding-right:4px;
	padding-left:0px;
	margin:0;
	border-right:1px solid #fff;
	border-bottom:1px solid #fff;	/* unterer Rand zur Seite */
	text-align:right;
	color:#333;
}

#nav li a {
	padding-top:30px;
	padding-right:4px;
	padding-bottom:3px;
	color:#eee;
	text-decoration:none;
}

#nav li a:hover {
	color:#333;
}
	
/* --- Bilder für Navigation ---  */

/* --- HOME --- */

.home_home {
	background-color:#666;
}

.home_vita {
	background:#000 url("layout/nav_pics/schwarz.gif");
	padding-left:79px;
}

#nav a:hover.home_vita {
	background:#666 url("layout/nav_pics/grau.gif");
}

.home_galerie {
	background:#000 url("layout/nav_pics/schwarz.gif");
	padding-left:61px;
}

#nav a:hover.home_galerie  {
	background:#666 url("layout/nav_pics/grau.gif");
}

.home_media {
	background:url("layout/nav_pics/home/nav_media.jpg");
	padding-left:66px;
}

#nav a:hover.home_media  {
	background:#666 url("layout/nav_pics/home/nav_media_hover.jpg");
}

.home_projekte {
	background:url("layout/nav_pics/home/nav_projekte.jpg");
	padding-left:50px;
}

#nav a:hover.home_projekte  {
	background:#666 url("layout/nav_pics/home/nav_projekte_hover.jpg");
}

.home_links {
	background:url("layout/nav_pics/home/nav_links.jpg");
	padding-left:76px;
}

#nav a:hover.home_links  {
	background:#666 url("layout/nav_pics/home/nav_links_hover.jpg");
}

.home_kontakt {
	background:url("layout/nav_pics/home/nav_kontakt.jpg");
	padding-left:54px;
}

#nav a:hover.home_kontakt  {
	background:#666 url("layout/nav_pics/home/nav_kontakt_hover.jpg");
}

/* --- VITA ---  */

.vita_home {
	background:url("layout/nav_pics/vita/nav_home.jpg");	
	padding-left:69px;
}

#nav a:hover.vita_home  {
	background:#666 url("layout/nav_pics/vita/nav_home_hover.jpg");
}

.vita_vita {
	background:#666 url("layout/nav_pics/vita/nav_vita.jpg");
}

.vita_galerie {
	background:url("layout/nav_pics/vita/nav_galerie.jpg");	
	padding-left:61px;
}

#nav a:hover.vita_galerie {
	background:#666 url("layout/nav_pics/vita/nav_galerie_hover.jpg");
}
.vita_media {
	background:url("layout/nav_pics/vita/nav_media.jpg");	
	padding-left:66px;
}

#nav a:hover.vita_media  {
	background:#666;
}

.vita_projekte {
	background:#000 url("layout/nav_pics/schwarz.gif");	
	padding-left:50px;
}

#nav a:hover.vita_projekte  {
	background:#666 url("layout/nav_pics/grau.gif");
}

.vita_links {
	background:#000 url("layout/nav_pics/schwarz.gif");
	padding-left:76px;
}

#nav a:hover.vita_links {
	background:#666 url("layout/nav_pics/grau.gif");
}

.vita_kontakt {
	background:#000 url("layout/nav_pics/schwarz.gif");
	padding-left:54px;
}

#nav a:hover.vita_kontakt {
	background:#666 url("layout/nav_pics/grau.gif");
}

/* --- GALERIE --- */

.galerie_home {
	background:#000 url("layout/nav_pics/schwarz.gif");	
	padding-left:69px;
}

#nav a:hover.galerie_home  {
	background:#666 url("layout/nav_pics/grau.gif");
}

.galerie_vita {
	background:#000 url("layout/nav_pics/schwarz.gif");	
	padding-left:79px;
}

#nav a:hover.galerie_vita  {
	background:#666 url("layout/nav_pics/grau.gif");
}

.galerie_galerie {
	background:#666;
}


.galerie_media{
	background:url("layout/nav_pics/galerie/nav_media.jpg");
	padding-left:66px;
}

#nav a:hover.galerie_media {
	background:#666 url("layout/nav_pics/galerie/nav_media_hover.jpg");
}

.galerie_projekte {
	background:url("layout/nav_pics/galerie/nav_projekte.jpg");
	padding-left:50px;
}

#nav a:hover.galerie_projekte {
	background:#666 url("layout/nav_pics/galerie/nav_projekte_hover.jpg");
}
	
.galerie_links {
	background:url("layout/nav_pics/galerie/nav_links.jpg");
	padding-left:76px;
}

#nav a:hover.galerie_links {
	background:#666 url("layout/nav_pics/galerie/nav_links_hover.jpg");
}

.galerie_kontakt {
	background:url("layout/nav_pics/galerie/nav_kontakt.jpg");
	padding-left:54px;
}

#nav a:hover.galerie_kontakt {
	background:#666 url("layout/nav_pics/galerie/nav_kontakt_hover.jpg");
}

/* MEDIA */

.media_home {
	background:url("layout/nav_pics/media/nav_home.jpg");	
	padding-left:69px;
}

#nav a:hover.media_home  {
	background:#666 url("layout/nav_pics/media/nav_home_hover.jpg");
}

.media_vita {
	background:url("layout/nav_pics/media/nav_vita.jpg");	
	padding-left:79px;
}

#nav a:hover.media_vita  {
	background:#666 url("layout/nav_pics/media/nav_vita_hover.jpg");
}

.media_galerie {
	background:#000 url("layout/nav_pics/media/nav_galerie.jpg");	
	padding-left:61px;
}

#nav a:hover.media_galerie  {
	background:#666 url("layout/nav_pics/grau.gif");
}

.media_media {
	background-color:#666;	
}

.media_projekte {
	background:#000 url("layout/nav_pics/schwarz.gif");
	padding-left:50px;
}

#nav a:hover.media_projekte  {
	background:#666 url("layout/nav_pics/grau.gif");
}

.media_links {
	background:#000 url("layout/nav_pics/schwarz.gif");
	padding-left:76px;
}

#nav a:hover.media_links  {
	background:#666 url("layout/nav_pics/grau.gif");
}

.media_kontakt {
	background:#000 url("layout/nav_pics/schwarz.gif");
	padding-left:54px;
}

#nav a:hover.media_kontakt {
	background:#666 url("layout/nav_pics/grau.gif");
}

/* PROJEKTE */

.projekte_home {
	background:#000 url("layout/nav_pics/schwarz.gif");	
	padding-left:69px;
}

#nav a:hover.projekte_home  {
	background:#666 url("layout/nav_pics/grau.gif");
}

.projekte_vita {
	background:#000 url("layout/nav_pics/schwarz.gif");	
	padding-left:79px;
}

#nav a:hover.projekte_vita  {
	background:#666 url("layout/nav_pics/grau.gif");
}

.projekte_galerie {
	background:#000 url("layout/nav_pics/schwarz.gif");	
	padding-left:61px;
}

#nav a:hover.projekte_galerie  {
	background:#666 url("layout/nav_pics/grau.gif");
}

.projekte_media {
	background:url("layout/nav_pics/projekte/nav_media.jpg");	
	padding-left:66px;
}

#nav a:hover.projekte_media  {
	background:#666 url("layout/nav_pics/projekte/nav_media_hover.jpg");
}

.projekte_projekte {
	background:#666 url("layout/nav_pics/projekte/nav_projekte.jpg");
}

.projekte_links {
	background:url("layout/nav_pics/projekte/nav_links.jpg");
	padding-left:76px;
}

#nav a:hover.projekte_links {
	background:#666 url("layout/nav_pics/projekte/nav_links_hover.jpg");
}

.projekte_kontakt {
	background:url("layout/nav_pics/projekte/nav_kontakt.jpg");
	padding-left:54px;
}

#nav a:hover.projekte_kontakt {
	background:#666 url("layout/nav_pics/projekte/nav_kontakt_hover.jpg");
}

/* LINKS */

.links_home {
	background:url("layout/nav_pics/links/nav_home.jpg");	
	padding-left:69px;
}

#nav a:hover.links_home  {
	background:#666 url("layout/nav_pics/links/nav_home_hover.jpg");
}

.links_vita {
	background:url("layout/nav_pics/links/nav_vita.jpg");	
	padding-left:79px;
}

#nav a:hover.links_vita  {
	background:#666 url("layout/nav_pics/links/nav_vita_hover.jpg");
}

.links_galerie {
	background:#000 url("layout/nav_pics/schwarz.gif");		
	padding-left:61px;
}

#nav a:hover.links_galerie  {
	background:#666 url("layout/nav_pics/grau.gif");
}

.links_media {
	background:#000 url("layout/nav_pics/schwarz.gif");		
	padding-left:66px;
}

#nav a:hover.links_media  {
	background:#666 url("layout/nav_pics/grau.gif");
}

.links_projekte {
	background:#000 url("layout/nav_pics/schwarz.gif");	
	padding-left:50px;
}

#nav a:hover.links_projekte  {
	background:#666 url("layout/nav_pics/grau.gif");
}

.links_links {
	background:#666;
}

.links_kontakt {
	background:#000 url("layout/nav_pics/schwarz.gif");	
	padding-left:54px;
}

#nav a:hover.links_kontakt {
	background:#666 url("layout/nav_pics/grau.gif");
}

/* KONTAKT */

.kontakt_home {
	background:#666 url("layout/nav_pics/schwarz.gif");	
	padding-left:69px;
}

#nav a:hover.kontakt_home  {
	background:#666 url("layout/nav_pics/grau.gif");
}

.kontakt_vita {
	background:#666 url("layout/nav_pics/schwarz.gif");		
	padding-left:79px;
}

#nav a:hover.kontakt_vita  {
	background:#666 url("layout/nav_pics/grau.gif");
}

.kontakt_galerie {
	background:#666 url("layout/nav_pics/schwarz.gif");		
	padding-left:61px;
}

#nav a:hover.kontakt_galerie  {
	background:#666 url("layout/nav_pics/grau.gif");
}

.kontakt_media {
	background:#666 url("layout/nav_pics/schwarz.gif");		
	padding-left:66px;
}

#nav a:hover.kontakt_media  {
	background:#666 url("layout/nav_pics/grau.gif");
}

.kontakt_projekte {
	background:#000 url("layout/nav_pics/kontakt/nav_projekte.jpg");
	padding-left:50px;
}

#nav a:hover.kontakt_projekte  {
	background:#666 url("layout/nav_pics/grau.gif");
}

.kontakt_links {
	background:#000 url("layout/nav_pics/kontakt/nav_links.jpg");
	padding-left:76px;
}

#nav a:hover.kontakt_links  {
	background:#666 url("layout/nav_pics/kontakt/nav_links_hover.jpg");
}

.kontakt_kontakt {
	background:#666 url("layout/nav_pics/kontakt/nav_kontakt.jpg");
}


		#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) left 15% no-repeat; }
		#nextLink:hover, #nextLink:visited:hover { background: url(images/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; }

