/*

	CSS fuer qhzucht.de
	10.09.2005 Gustaf Mossakowski, gustaf at koenige.org

	gruen oben				#4E7A2D
	blau hintergrund		#003
*/

html, body {height: 100%; background: #003;}
body {font-family: Arial, sans-serif; padding: 0;  margin: auto; color: #FFF;}
#middle {height: 100%; width: 100%; text-align: center; font-size: 82%; /* text-align for IE 5 */}
#canvas {width: 60em; height: 38em; margin: auto; position: relative; 
	text-align: left; /* text-align see above */ ;}

#kopf {background: #4E7A2D; width: 60em; height: 7.5em; position: relative;
	border-bottom: 1px solid #FFF;}
#kopf img {position: absolute; right: 5px; bottom: 5px; border: 0;}

#fuss {background: #4E7A2D; width: 60em; height: 7.25em; position: absolute;
	border-top: 1px solid #FFF; clear: both; z-index: 2;}
	
h1 {/*border-top: 1px solid white; padding-top: .5em; */
	font-size: 135%; margin: 0; text-align: right; }

ul.pferde {margin: 0; padding: 0 10px; list-style: none; 
	/*height: 23.5em;*/ overflow: auto;} /* padding-top gilt bei IE auch fuer 2. Reihe */
.pferde li {margin: 0; padding: 10px 10px 10px 0; float: left; width: 135px; 
	text-align: center;}
.pferde img {border: none;}

p.daten {border-top: 1px solid white; margin: 0; text-align: right; float: right; 
	width: 25em; font-size: 110%; padding: 0;}
#pferd {float: left; margin: -1em 0 0; padding: 0 10px 0 0; width: 260px; 
	position: relative; z-index: 1; overflow: hidden;}
#verkauft {position: absolute; z-index: 2; top: 0; left: 0; display: block;}
#pferd #verkauft {width: 270px; height: 200px; background-image: url(verkauft-200.gif);}
.pferde li {position: relative;}
.pferde #verkauft {width: 121px; height: 90px; top: 10px; left: 10px; 
	background-image: url(verkauft-90.gif);}
h2 {font-size: 110%; margin: 0; padding: 0; } 


.stammbaum {padding-top: .5em; margin: 0 0 0 280px; clear: right;
	padding-left: 6.5em;}
.stammbaum ul {list-style: none; padding: 0; margin: 0; }
.stammbaum li {line-height: 120%; position: relative; width: 11em; margin: 0; padding: 0;}
.stammbaum li {padding-top: 2.7em; padding-bottom: 2.1em;}
.stammbaum li ul {position: absolute; top: 0; left: 11em;}
.stammbaum li li {padding-top: 1.2em; padding-bottom: .6em;}
.stammbaum li li ul {padding-top: .6em;}
.stammbaum li li li {padding-top: 0; padding-bottom: 0;}
.stammbaum h2 {display: none;}

.status {float: left; width: 270px; clear: left; z-index: 2; margin: 0;}
.status p {margin-top: 0;}
.nachzucht {margin-left: 280px; padding-left: 6.5em; }
.nachzucht h2 {width: 8em; float: left; margin: 0;
	padding: 1em 0 0; font-size: 100%; }

#text {height: 23.5em; width: 60em; position: relative; margin: 0; padding: 0; z-index: 2;}
#text a {color: #FFF;  /*background: #252550; */}
#text .pferde a {text-decoration: none;}
#text a img {margin-bottom: 4px;}
#text a em {text-decoration: underline; font-style: normal;}
#text a:visited {color: #CCC;}

#schriftzug {position: absolute; z-index: 0; left: 10px; bottom: 1.8em; 
	margin: 0 0 -10px; padding: 0; font-size: 370%; font-weight: bold; color: #20332F}
	
#nav {margin: 0; padding: 0 0 0 10px; list-style: none;}
#nav li {float: left; width: 25px; height: 43px; padding: 0; margin: 0 10px 0 0;}
#nav li a {display: block; width: 25px; height: 43px;}
#nav #menu-home a {background-image: url('menu-1.gif');}
#nav #menu-home a:hover, #nav #menu-home strong a {background-position: 100% 100%;}
#nav #menu-zuchtbetrieb a {background-image: url('menu-2.gif');}
#nav #menu-zuchtbetrieb a:hover, #nav #menu-zuchtbetrieb strong a {background-position: 100% 100%;}
#nav #menu-news a {background-image: url('menu-3.gif');}
#nav #menu-news a:hover, #nav #menu-news strong a {background-position: 100% 100%;}
#nav #menu-deckhengste a {background-image: url('menu-4.gif');}
#nav #menu-deckhengste a:hover, #nav #menu-deckhengste strong a {background-position: 100% 100%;}
#nav #menu-zuchtstuten a {background-image: url('menu-5.gif');}
#nav #menu-zuchtstuten a:hover, #nav #menu-zuchtstuten strong a {background-position: 100% 100%;}
#nav #menu-verkauf a {background-image: url('menu-6.gif');}
#nav #menu-verkauf a:hover, #nav #menu-verkauf strong a {background-position: 100% 100%;}
#nav #menu-links a {background-image: url('menu-7.gif');}
#nav #menu-links a:hover, #nav #menu-links strong a {background-position: 100% 100%;}
#nav #menu-kontakt a {background-image: url('menu-8.gif');}
#nav #menu-kontakt a:hover, #nav #menu-kontakt strong a {background-position: 100% 100%;}
#nav li span {position: absolute; top: 22px; left: 295px; margin-left: 6.9em;
	display: none; }
#nav li strong span {display: block; z-index: 1;}
#nav a:hover {text-indent: 0; text-decoration: none;} /* nonsense, sonst interpretiert IE aber die folgende Regel nicht */
#nav a:hover span {display: block; width: 6em; color: white; z-index: 2; 
	background-color: #4E7A2D;}

#qh {color: #314C1F; position: absolute; top: 22px; margin: 0; padding: 0; left: 295px;}
#qh strong {color: #FFF; display: none; position: absolute; top: 0; left: 6.9em;}
#pferde #qh strong {display: block;}

#cover #canvas, #cover #kopf, #cover #fuss {background-repeat: no-repeat;}
#cover #kopf {background-image: url(cover-gruen.gif); background-position: 100% 0}
#cover #canvas {background-image: url(cover-blau.gif); background-position: 100% 0 }
#cover #fuss {background-image: url(cover-gruen.gif); background-position: 100% -31em;
	background-repeat: no-repeat;}

.spalte {width: 29em; padding-right: 1em; float: left;}
#kontakt {padding-top: 10px; width: 60em;}
#kontakt {line-height: 120%; font-size: 100.01%;}
#kontakt table {border-collapse: collapse; }
#kontakt table {font-size: 100.01%;}
#kontakt td, #kontakt th {padding: .25em .5em 0 0; vertical-align: top;}
#kontakt th {text-align: left; }
#kontakt .mail td, #kontakt .mail th {padding-top: 1.5em; }
.nurname {padding-bottom: 1.2em;}
#kontakt .nurtel th, #kontakt .nurtel td {padding: 5.8em 0 2.95em;}

.oben {margin: 0; padding: 1em 0 0; }
.oben img {border: none;}
.unten {clear: both; padding-top: .25em; width: 30em; }

#grossbild {text-align: center; margin: auto; height: 100%;}
#grossbild img {border: none;}
#grossbild table {width: 100%; height: 100%; border-collapse: collapse;}
#grossbild td {padding: 0;}

.kontaktphoto {padding: 0; margin: 0; width: 9em;}
.kontaktphoto img {padding-right: .5em;}
.kontaktspalte {float: left; width: 13em; }

#links h2 {margin-bottom: 0;}
#links p {margin-top: 0;}

#photo_gross {margin: -1em 0 0; float: left;}
#photo_gross img {border: 0;}

#bildnav { margin: .1em 0 0; padding: 0; position: absolute; right: 0; bottom: 19px; 
	zoom: 1;}
#bildnav a { text-align: right; text-decoration: none;}
#bildnav a.zurueck {background: url('zurueck.gif') no-repeat 100% 0%; height: 25px; cursor: pointer;
	vertical-align: middle; line-height: 25px; display: block; float: right; width: 7.5em;
	margin-right: 10px; padding-right: 32px;}
#bildnav a.vorwaerts {background: url('vorwaerts.gif') no-repeat 0 0%; height: 25px; cursor: pointer;
vertical-align: middle; line-height: 25px; display: block; float: right; width: 6.25em;
	padding-left: 32px;}
#bildnav a.zurueck:hover {background-position: 100% 100%;}
#bildnav a.vorwaerts:hover {background-position: 0 100%;}

#zurueck {float: right; margin: 0; padding: 0 10px 0 32px; 
background: url('zurueck.gif') no-repeat 0 0%; height: 25px; cursor: pointer;
vertical-align: middle; line-height: 25px;}
#zurueck.hover, #zurueck:hover {background-position: 0% 100%;}