@charset "UTF-8";

/*	INDIVIDUAL STYLESHEET | PRAXIS FÜR PHYSIOTHERAPIE petervoß+team, Münster
	© by the author, Oliver Lich
	[ denkwerq ] Münster & Baden-Baden */

body {
	font: 90%/1.4 MyriadPro, Verdana, Arial, Helvetica, sans-serif;
	background: #fff;
	margin: 0;
	padding: 0;
	color: #666;
	overflow-y: scroll; /* Vertikale Scrollbar erzwingen */
	}

/* ELEMENT-/TAG-SELEKTOREN */

ul, ol, dl { 	/* Aufgrund von Abweichungen zwischen verschiedenen Browsern empfiehlt es sich, die Auffüllung und den Rand in Listen auf 0 einzustellen. Zu Konsistenzzwecken können Sie die gewünschten Werte entweder hier oder in den enthaltenen Listenelementen (LI, DT, DD) eingeben. 
Beachte, dass die hier eingegebenen Werte hierarchisch auf die .nav-Liste angewendet werden, sofern keinen spezifischerer Selektor festgelegt wird. */
	padding: 0;
	margin: 0;
	}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 			/* Durch Verschieben des oberen Rands wird das Problem behoben, dass Ränder aus dem zugehörigen div-Tag geraten können. Der übrig gebliebene untere Rand hält ihn getrennt von allen folgenden Elementen. */
	padding-right: 0px;
	padding-left: 0px; 		/* Durch Hinzufügen der Auffüllung zu den Seiten der Elemente innerhalb der div-Tags anstelle der div-Tags selbst entfallen jegliche Box-Modell-Berechnungen. Alternativ kann auch ein verschachteltes div-Tag mit seitlicher Auffüllung verwendet werden. */
	}

h1 {
  font-family: MyriadPro, Verdana, Arial, Helvetica, sans-serif;
  font-size: 180%;
  /* font-weight:lighter; */
  font-weight: 400;
  text-shadow: 2px 2px 2px #ebebeb;
  color: #f08731
  }
  
h2 {
  font-family: MyriadPro, Verdana, Arial, Helvetica, sans-serif;
  font-size: 130%;
  font-weight: normal;
  text-shadow: 2px 2px 2px #ebebeb;
  color: #f08731
  }

h3 {
  font-size: 100%;
  font-weight: bold;
  text-shadow: 2px 2px 2px #ebebeb;
  color: #f08731
  }
  
h4 { 		/* Sidebar-Text unter der Navigation*/
  font-family: MyriadPro, Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%;
  font-weight: normal;
  /* text-shadow: 2px 2px 2px #ebebeb; */
  color: #f08731
  }

a img { 	/* Entfernt blauen Rahmen um verlinkte Graphik für alle Browser. */
	border: none;
	}
	
/* Reihenfolge der Stildefinitionen für Hyperlinks der Site, einschließlich der Gruppe der Selektoren zum Erzeugen des Hover-Effekts, muss erhalten bleiben. */
a:link {
	color: #bd445e;		/* rot */
	text-decoration: none;
	}

a:visited {
	color: #bd445e;		/* rot */
	text-decoration: none;
	}

a:hover, a:active, a:focus { 		/* Gleicher Hover-Effekt bei Verwendung von Tastatur und Maus. */
	text-decoration: underline;
	}

/* CONTAINER umschließt die anderen div-Tags. */
.container {
	position: relative;  	/* neu */
	width: 1000px;
	background: #FFF;
	margin: 0 auto; 		/* Der mit der Breite gekoppelte automatische Wert an den Seiten zentriert das Layout. */
}
	
/* HEADER_PHOTOS: Abgerundetes Bild mit Schlagschatten */

div#header_photo_div {
	position: absolute;
	top: 95px;	
	left: 512px;
	width: 380px;
	height: 250px;
	margin: 5px 5px 5px 5px;
	}
	
.header_photo {
	width: 380px;
	height: 250px;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius: 20px;
	-moz-box-shadow: 4px 4px 12px #999;
	/* Webkit-Browser (Chrome, Safari) */
	-webkit-border-radius: 20px;
	-webkit-box-shadow: 4px 4px 12px #999;
	/* CSS3 allgemein */
	border-radius: 20px;
	box-shadow: 4px 4px 12px #999;
	background: transparent url("../photos/themen/praxis_380x250.jpg") no-repeat 0 0;
	}
	
/* HEADER: Abgerundetes Bild mit Schlagschatten */
 
div#header {
	width: 1000px;
	height: 250px;
	float: left;
	margin: 10px 0px 15px 0px;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius: 20px;
	-moz-box-shadow: 4px 4px 12px #bbb;
	/* Webkit-Browser (Chrome, Safari) */
	-webkit-border-radius: 20px;
	-webkit-box-shadow: 4px 4px 12px #bbb;
	/* CSS3 allgemein */
	border-radius: 20px;
	box-shadow: 4px 4px 12px #bbb;
	background: transparent url("../pics/header.png") no-repeat 0 0;
	}

/* LAYOUT 

1) Eine Auffüllung wird nur oben und/oder unten in den div-Tags positioniert. Die Elemente innerhalb dieser div-Tags verfügen über eine seitliche Auffüllung. Dadurch müssen keine Box-Modell-Berechnungen durchgeführt werden. Beachte: Wenn dem div-Tag eine seitliche Auffüllung oder einen Rahmen hinzugefügt wird, werden diese zu der festgelegten Breite addiert und ergeben die *gesamte* Breite. Die Auffüllung für das Element im div-Tag können entfernt werden sowie ein zweites div-Tag ohne Breite und mit der gewünschten Auffüllung im ersten div-Tag eingefügt werden. Auffüllung für das Element im div-Tag entfernen und ein zweites div-Tag ohne Breite und mit der gewünschten Auffüllung im ersten div-Tag einfügen ist möglich.

2) Für die Spalten wurde kein Rand angegeben, da es sich um fließende Spalten handelt. Soll ein Rand hinzugefüft werden, diesen nicht auf der Seite in Flussrichtung platzieren (z. B. ein rechter Rand in einem div-Tag, das so festgelegt ist, dass das Element nach rechts fließt). In vielen Fällen kann stattdessen eine Auffüllung verwendet werden. Bei div-Tags, bei denen diese Regel gebrochen werden muss, sollte der Regel des div-Tags eine display:inline-Deklaration hinzugefügt werden, um das Problem zu umgehen, dass in einigen Versionen von Internet Explorer der Rand doppelt angezeigt wird.

3) Da Klassen in einem Dokument mehrmals verwendet werden können (und zudem auf ein Element mehrere Klassen angewendet werden können), wurden den Spalten Klassennamen statt IDs zugewiesen. Beispielsweise können zwei div-Tags für eine Seitenleiste bei Bedarf gestapelt werden. Diese div-Tags können problemlos in IDs geändert werden, solange sie nur einmal pro Dokument verwendet werden.

4) Bei Navigation auf der rechten Seite (statt links), diese Spalten einfach in die andere Richtung fließen lassen (alle nach rechts anstatt alle nach links). Die Spalten werden dann in umgekehrter Reihenfolge dargestellt. Die div-Tags in der HTML-Quelle müssen nicht verschoben werden. */

.sidebar1 {
	float: left;
	width: 230px;
	background: #fff;
	padding: 10px 0px 10px 20px;
	font-family: MyriadPro, Verdana, Arial, Helvetica, sans-serif;
	color: #f08731; 			/* orange */
	font-size: 13px;
	font-weight: normal;
	}

.sidebar1 a;
.sidebar1 a:visited {
	color: #f08731; 			/* orange */
	}

.sidebar1 a:hover, 
.sidebar1 a:active, 
.sidebar1 a:focus {
	color: #bd445e;			/* rot */
	}
	
	
/* NAVIGATION */

ul.nav1 {
	list-style: none; 							/* Listenmarkierung wird entfernt. */
	/* border-top: 1px solid #666; 	/* Oberer Rand für die Hyperlinks erstellt. Alle anderen werden mit einem unteren Rand im LI-Element platziert. */
	/* margin-top: 20px;		 			/* Abstand der Navigationselemente nach oben zum Header. */
	margin-bottom: 30px; 					/* Abstand zwischen den Navigationselementen und den Inhalten unterhalb der Navigation. */
	margin-left: 0px;							/* Einrückung Navi-Schaltfläche inkl. Navi-Text nach rechts */
	line-height: 68px;
	font-size: 18px;
	font-weight: lighter;
	color: #f08731; 							/* orange */
	text-shadow: 2px 2px 2px #ebebeb;
	}

ul.nav1 a, 
ul.nav1 a:visited { 						/* Gruppieren dieser Selektoren stellt sicher, dass die Hyperlinks auch nach dem Aufrufen die Form einer Schaltfläche beibehalten. */
	padding: 0px 0px 5px 20px;	/* Einrückung Navi-Text */
	display: block; 						/* Blockeigenschaften für den Hyperlink, sodass das gesamte umschließende LI-Element aufgefüllt wird. Hierdurch reagiert der gesamte Bereich auf Mausklick. */
	width: 170px;  							/* Nur für IE6: Mit dieser Breite reagiert die gesamte Schaltfläche in IE6 auf Mausklicks. Kann entfernt werden, wenn IE6 nicht unterstützt werden muss. 
	Berechnung der exakten Breite durch Subtrahieren der Auffüllung für diesen Hyperlink von der Breite des Containers für die Randleiste. */
	text-decoration: none;
	text-shadow: 0px 0px 0px #ebebeb;
	color: #f08731;						/* orange */
	background-image: url(../pics/navi1_190.png);
	}

ul.nav1 a:hover, 
ul.nav1 a:active, 
ul.nav1 a:focus { 				/* Hintergrund und Textfarbe wird bei Navigation mit Maus und Tastatur geändert. */
	background-image: url(../pics/navi1_190.png);
	color: #bd445e;					/* rot */
	}

/* AKTIVE NAVIGATION - KONTEXT SELEKTIERT */

#home #nav_home a, 
#praxis #nav_praxis a,
#team #nav_team a, 
#leistungen #nav_leistungen a,
#anfahrt #nav_anfahrt a
{
	list-style: none; 							/* Listenmarkierung wird entfernt. */
	/* border-top: 1px solid #666; 	/* Oberer Rand für die Hyperlinks erstellt. Alle anderen werden mit einem unteren Rand im LI-Element platziert. */
	/* margin-top: 20px;		 			/* Abstand der Navigationselemente nach oben zum Header. */
	/* margin-bottom: 30px; 			/* Abstand zwischen den Navigationselementen und den Inhalten unterhalb der Navigation. */
	margin-left: 0px;							/* Einrückung Navi-Schaltfläche inkl. Navi-Text nach rechts */
	line-height: 68px;
	font-size: 18px;
	font-weight: lighter;
	color: #fff; 									/* weiss */
	/* text-shadow: 2px 2px 2px #ebebeb; */
	background-image: url(../pics/navi_aktiv1_190.png);
	}

.content_outer {
	padding: 91px 0px 10px 0px;
	width: 750px;
	float: left;
	background-image: url(../pics/background_content.gif)
	}

.content { /* transparent-weißes Inhaltsfeld mit Radius und Schatten */
	margin: 0px 0px 60px 25px;
	padding: 10px 10px 10px 20px;
	width: 670px;
	float: left;
	font-size: 13px;
	background-image: url(../pics/background_content_weiss.png);
	/* Gecko-Browser (Firefox) */
	-moz-border-radius: 20px;
	-moz-box-shadow: 4px 4px 12px #CCC;
	/* Webkit-Browser (Chrome, Safari) */
	-webkit-border-radius: 20px;
	-webkit-box-shadow: 4px 4px 12px #CCC;
	/* CSS3 allgemein */
	border-radius: 20px;
	box-shadow: 4px 4px 12px #CCC;
	}


/* frei Graphiken in der Seite */
.freie_graphiken {
	/* float:left; */
	margin: 0px 15px 40px 0px;
	/* Gecko-Browser (Firefox) */
	-moz-box-shadow: 4px 4px 12px #999;
	/* Webkit-Browser (Chrome, Safari) */
	-webkit-box-shadow: 4px 4px 12px #999;
	/* CSS3 allgemein */
	box-shadow: 4px 4px 12px #999;
	}


/* TEAMPHOTOS */
.teamphoto {
	width: 150px;
	height: 195px;
	/* float:left; */
	margin: 0px 15px 40px 0px;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius: 20px;
	-moz-box-shadow: 4px 4px 12px #999;
	/* Webkit-Browser (Chrome, Safari) */
	-webkit-border-radius: 20px;
	-webkit-box-shadow: 4px 4px 12px #999;
	/* CSS3 allgemein */
	border-radius: 20px;
	box-shadow: 4px 4px 12px #999;
	background: transparent url("../photos/personen/ALTE_teambilder/ALT_team_britta_steffens-boensch_150x195.JPG") no-repeat 0 0;
	}

.teamphoto_rechts {
	width: 150px;
	height: 195px;
	/* float:left; */
	margin: 0px 0px 40px 0px;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius: 20px;
	-moz-box-shadow: 4px 4px 12px #999;
	/* Webkit-Browser (Chrome, Safari) */
	-webkit-border-radius: 20px;
	-webkit-box-shadow: 4px 4px 12px #999;
	/* CSS3 allgemein */
	border-radius: 20px;
	box-shadow: 4px 4px 12px #999;
	background: transparent url("../photos/personen/ALTE_teambilder/ALT_team_britta_steffens-boensch_150x195.JPG") no-repeat 0 0;
	}

.teamphoto_quadratisch {
	width: 150px;
	height: 150px;
	/* float:left; */
	margin: 0px 15px 40px 0px;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius: 20px;
	-moz-box-shadow: 4px 4px 12px #999;
	/* Webkit-Browser (Chrome, Safari) */
	-webkit-border-radius: 20px;
	-webkit-box-shadow: 4px 4px 12px #999;
	/* CSS3 allgemein */
	border-radius: 20px;
	box-shadow: 4px 4px 12px #999;
	background: transparent url("../photos/personen/ALTE_teambilder/ALT_team_britta_steffens-boensch_150x195.JPG") no-repeat 0 0;
	}

.teamphoto_quadratisch_rechts {
	width: 150px;
	height: 150px;
	/* float:left; */
	margin: 0px 0px 40px 0px;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius: 20px;
	-moz-box-shadow: 4px 4px 12px #999;
	/* Webkit-Browser (Chrome, Safari) */
	-webkit-border-radius: 20px;
	-webkit-box-shadow: 4px 4px 12px #999;
	/* CSS3 allgemein */
	border-radius: 20px;
	box-shadow: 4px 4px 12px #999;
	background: transparent url("../photos/personen/ALTE_teambilder/ALT_team_britta_steffens-boensch_150x195.JPG") no-repeat 0 0;
	}

.teamphoto_125x125 {
	width: 125px;
	height: 125px;
	/* float:left; */
	margin: 0px 0px 40px 25px;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius: 20px;
	-moz-box-shadow: 4px 4px 12px #999;
	/* Webkit-Browser (Chrome, Safari) */
	-webkit-border-radius: 20px;
	-webkit-box-shadow: 4px 4px 12px #999;
	/* CSS3 allgemein */
	border-radius: 20px;
	box-shadow: 4px 4px 12px #999;
	background: transparent url("../photos/personen/ALTE_teambilder/ALT_team_britta_steffens-boensch_150x195.JPG") no-repeat 0 0;
	}

.teamphoto_125x125_rechts {
	width: 125px;
	height: 125px;
	/* float:left; */
	margin: 0px 0px 40px 25px;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius: 20px;
	-moz-box-shadow: 4px 4px 12px #999;
	/* Webkit-Browser (Chrome, Safari) */
	-webkit-border-radius: 20px;
	-webkit-box-shadow: 4px 4px 12px #999;
	/* CSS3 allgemein */
	border-radius: 20px;
	box-shadow: 4px 4px 12px #999;
	background: transparent url("../photos/personen/ALTE_teambilder/ALT_team_britta_steffens-boensch_150x195.JPG") no-repeat 0 0;
	}
	
.teamphoto_250x250 {
	width: 250px;
	height: 250px;
	/* float:left; */
	margin: 0px 0px 40px 25px;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius: 20px;
	-moz-box-shadow: 4px 4px 12px #999;
	/* Webkit-Browser (Chrome, Safari) */
	-webkit-border-radius: 20px;
	-webkit-box-shadow: 4px 4px 12px #999;
	/* CSS3 allgemein */
	border-radius: 20px;
	box-shadow: 4px 4px 12px #999;
	background: transparent url("../photos/personen/ALTE_teambilder/ALT_team_britta_steffens-boensch_150x195.JPG") no-repeat 0 0;
	}

/* LISTEN IM BEREICH .content */

.content ul,
.content ol { 
	padding: 0 15px 15px 40px; 	/* Auffüllung setzt die rechte Auffüllung in der obigen Regel für Überschriften und Absätze fort. Die Auffüllung wurde unten für den Abstand zwischen anderen Elementen in den Listen und links für den Einzug platziert. */
	}

/* FOOTER */

/* .footer {
	padding: 10px 0;
	background: #CCC49F;
	position: relative; 	/* IE6 erhält die Eigenschaft hasLayout, damit die clear-Anweisung korrekt ausgeführt wird. *
	clear: both; 				/* Bewirkt, dass .container das Ende der fließenden Spalten erkennt und ihren Inhalt aufnimmt. *
} */

/* Hintergrundbild mit Radien oben und Schatten */
 
div#footer {
	width: 1000px;
	height: 40px;
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	-moz-box-shadow: 4px 4px 12px #bbb;
	/* Webkit-Browser (Chrome, Safari) */
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-webkit-box-shadow: 4px 4px 12px #bbb;
	/* CSS3 allgemein */
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	box-shadow: 4px 4px 12px #bbb;
	background: transparent url("../pics/footer.png") no-repeat 0 0;
	color: #FFF
	}

div#footer a {
	color: #FFF;
	}

div#footer a:hover, 
div#footer a:active, 
div#footer a:focus {
	color: #bd445e;		/* rot */
	text-decoration: none;
	}
	
div#footer_content_left {
	float: left;
	padding: 10px 20px 0px 20px;
	color: #FFF;
	font-size: 13px;
	}
	
.thumpnail {
	hight: 150px;
	width: 150px;
	-moz-transition-duration: 1s;
	}
	
.thumpnail_hover {
	background-color: RGBA (200, 0, 0, 2.0); /* RGB-Farbwerte + Tranzparenzangabe */
	hight: 300px;
	width: 300px;
	-moz-transition-duration: 2s;	
	}

/* VERSCHIEDENE FOAT-/CLEAR-KLASSEN */

.float_right {  	/* Element auf der Seite nach rechts fließen lassen. */
	float: right;
	margin-left: 8px;
	}

.float_left { 		/* Element auf der Seite nach links fließen lassen. */
	float: left;
	margin-right: 8px;
	}

.clearfloat { 		/* Klasse kann in einem <br />-Tag oder leeren div-Tag als letztes Element nach dem letzten fließenden div-Tag (im #container) platziert werden, wenn #footer entfernt oder aus dem #container herausgenommen wird. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
	}
	
/* LIGHTBOXES */

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