/*
* Fuer den Wegwartehof nach dem Design von Robert Wilfurt (alphagrafik) von Subhash

* WICHTIG:
* Dieses Design ist keine Vorlage. Sie dürfen es nicht ohne die schriftliche
* Einwilligung von Subhash (www.subhash.at) benutzen. Sie dürfen natürlich
* dieses Stylesheet studieren und die Techniken, die Sie daraus lernen,
* anderweitig benutzen.

* For Wegwartehof following the design by Robert Wilfurt (alphagrafik) made by Subhash

* IMPORTANT
* This design is not a template. You may not reproduce it elsewhere without
* Subhash's (www.subhash.at) written permission. However, feel free to study
* the CSS and use techniques you learn from it elsewhere.
*/

/*
RGB-Farben:
	0r 104g 180b (Logo: Schrift; Briefpapier: Kopf und Fuß) 
	200r 214g 239b (Logo: Wegwarte und Pferd)
*/

/*
body,td,th {
	font-size: 10px;
}
*/

body {
	margin: 0;
	padding: 0;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 76%; /* ergibt die generelle Größe; nicht unter 76% anwenden */
	color: #000;
	background: #3f432d url(../img/hg.jpg) repeat top center;
}
div {
	margin: 0;
	padding: 0;
}
#wrapper {
	position: absolute;
	top: 44%;
	left: 50%;
	margin-top: -260px;
	margin-left: -400px;
	width: 800px;
	height: 580px;
	background: #fbf09e url(../img/hg_klein.jpg) repeat top center;
}
#kopf {
	padding-top: 7px;
	background: #cc3;
	height: 43px;
}
#demeter_logo {
	position: absolute;
	top: 0;
	left: 50%;
	margin-top: 0;
	margin-left: -45px;
	border: 0;
	width: 90px;
	height: 42px;
}
#inhalt { /* umfasst #s_links und #s_rechts (fuer Start- und Bestellseite siehe unten "Seitenspezifisches") */
	margin: 0 25px 0;
	padding-top: 48px; /* (margin beachtet ie7 nicht) */
	width: 750px;
	height: 315px;
	background: #fbf09e;
}
#s_links {
	float: left;
	margin: 5px 15px 5px 0;
}
#s_rechts {
	margin: 5px 0;
	padding: 10px 1em 0 15px;
	height: 305px;
	overflow: auto;
}
#zitat {
	clear: both;
	height: 75px;
	font-size: 0.9em;
}
#zitat p {
	padding-top: 3.4em;
}
#adresse {
	height: 15px;
	font-size: 0.9em;
	line-height: 15px;
	text-align: center;
	color: #cc3;
	/* background: #fbf09e; */
}
#fuss {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 0;
	width: 800px;
	height: 40px;
	font-size: 0.9em;
	text-align: center;
	background: #cc3;
}

/* Typografie */
a:link, a:visited, a:active {
	font-weight: bold;
	text-decoration: none;
}
a:link {
	color: #3f432d;
}
a:visited {
	color: #5f634d;
}
a:active {
	color: #033;
}
a:hover {
	color: #900;
	text-decoration: underline;
}
#fuss h2, #fuss h3 {
	margin: 3px 0 0; /* margin-left wird unten jeweils angepasst gesetzt */
	text-indent: -10000px;
}
h3, h4, h5, h6 {
	margin: 1.2em 0 0.3em;
	font-weight: bold;
	color: #2f331d;
}
h4 {
	font-size: 1.1em;
}
p, ul, ol, li, #online_bestellung td {
	font-size: 1em;
	line-height: 1.3em;
}
p {
	margin: 0.7em 0;
	padding: 0;
}
ol, ul, li {
	list-style: none;
}
ol, ul {
	margin: 0.7em 0 0.4em;
	padding: 0 0 0 0.5em;
}
li {
	margin: 0;
	padding: 0;
}
ul.circle, ul.circle li {
	list-style-type: circle;
}
ul.circle {
	padding: 0 0 0.3em 1.5em;
}
img {
	border: 0;
}
#inhalt #logo {
	margin: 0;
	border: 0;
	/* 
	width: 220px;
	height: 140px;
	*/
	width: 165px !important;
	height: 105px !important;
}
.c {
	text-align: center;
}
.r {
	text-align: right;
}
strong, b {
	font-weight: bold;
}
.sr, .sm { /* fuer Suchmaschinen, Screenreader oder Textbrowser */
 position: absolute;
 left: -1000px; 
 top: -1000px;
 width: 0px;
 height: 0px;
 overflow: hidden;
 display: inline;
}
.ntm {
	margin-top: 0 !important;
}

/* =============== Hauptnavigation: =============== */

#hauptnavig {
	position: absolute;
	top: 51px;
	left: 0;
	width: 800px;
	margin: 2px auto 2px auto;
	padding: 0;
	font-size: 0.9em;
	text-align: center;
}
#hauptnavig li {
	display: inline;
	margin: 0 3px;
	padding: 2px;
	font-weight: bold;
	background: #ffc;
}
#hauptnavig li:hover {
	background: #3f432d;
}
#hauptnavig li.erster {
	margin-left: 0;
}
#hauptnavig li.letzter {
	margin-right: 0;
}
#hauptnavig li a {
	text-decoration: none;
	text-indent: 0;
}
#hauptnavig li:hover a, #hauptnavig li a:hover, #hauptnavig li#aktiv, #hauptnavig li#aktiv a {
	text-decoration: none;
	color: #fbf09e;
	background: #3f432d;
}

#onlinekauf {
	display: none;
}

#home #onlinekauf {
	display: block;
	position: absolute;
	top: 80px;
	right: 25px;
	z-index: 100;
	margin: 0;
	padding: 2px;
	font-size: 0.9em;
	font-weight: bold;
	background: #ffc;
}
#home #onlinekauf:hover {
	text-decoration: none;
	color: #fbf09e;
	background: #3f432d;
}

/* ================ Unternavigation: ================ */

#subnavig {
	position: absolute;
	top: 50px;
	left: 0;
	width: 800px;
	margin: 2.3em auto 2px auto;
	padding: 0;
	font-size: 0.9em;
	text-align: center;
}
#subnavig li {
	display: inline;
	margin: 0 4px;
	padding: 2px;
	background: #cc3;
}
#subnavig li:hover {
	background: #3f432d;
}
#subnavig li.erster {
	margin-left: 0;
}
#subnavig li.letzter {
	margin-right: 0;
}
#subnavig li a {
	font-weight: normal;
	text-decoration: none;
	text-indent: 0;
}
#subnavig li:hover a, #subnavig li a:hover, #subnavig li#s_aktiv, #subnavig li#s_aktiv a {
	text-decoration: none;
	color: #fbf09e;
	background: #3f432d;
}

/* =============== Schriftersetzungen: =============== */

#kopf h1 {
	margin: 0 0 0 591px;
	padding: 0;
	width: 189px;
	height: 38px;
	background: transparent url(../img/schriftbilder/wegwartehof.gif) no-repeat top left;
}
#home #kopf h1, #kopf h1 a {
	display: block;
	text-indent: -10000px;
}
#home #fuss h2 {
	margin-left: 260px;
	width: 520px;
	height: 36px;
	background: transparent url(../img/schriftbilder/stutenkraeuter.gif) no-repeat top left;
}
#ueber_uns #fuss h2 {
	margin-top: 1px;
	margin-left: 651px;
	width: 125px;
	height: 36px;
	background: transparent url(../img/schriftbilder/ueber_uns.gif) no-repeat top left;
}
#bio_demeter #fuss h2 {
	margin-top: 3px;
	margin-left: 348px;
	width: 428px;
	height: 36px;
	background: transparent url(../img/schriftbilder/bio_dyn_demeter.gif) no-repeat top left;
}
#menschen #fuss h2 {
	margin-top: 4px;
	margin-left: 581px;
	width: 195px;
	height: 30px;
	background: transparent url(../img/schriftbilder/die_menschen.gif) no-repeat top left;
}
#philosophie #fuss h2 {
	margin-top: 2px;
	margin-left: 520px;
	width: 256px;
	height: 39px;
	background: transparent url(../img/schriftbilder/unsere_philosophie.gif) no-repeat top left;
}
#stutenmilch #fuss h2 {
	margin-left: 536px;
	width: 242px;
	height: 36px;
	background: transparent url(../img/schriftbilder/stutenmilchgestuet.gif) no-repeat top left;
}
#anwendung #kopf h1, #trinkkur #kopf h1, #kosmetik #kopf h1, #geschichte #kopf h1, #gewinnung #kopf h1 {
	float: right;
	display: inline; /* gg. doublemarginbug in ie */
	margin: 0 20px 0 0;
}
#anwendung #kopf h2, #trinkkur #kopf h2, #kosmetik #kopf h2, #geschichte #kopf h2, #gewinnung #kopf h2 {
	margin: 2px 0 0 22px;
	padding: 0;
	width: 242px;
	height: 36px;
	text-indent: -10000px;
	background: transparent url(../img/schriftbilder/stutenmilchgestuet.gif) no-repeat top left;
}
#anwendung #fuss h3 {
	margin-left: 288px;
	width: 490px;
	height: 36px;
	background: transparent url(../img/schriftbilder/anwendungsgebiete.gif) no-repeat top left;
}
#trinkkur #fuss h3 {
	margin-left: 665px;
	width: 113px;
	height: 31px;
	background: transparent url(../img/schriftbilder/trinkkur.gif) no-repeat top left;
}
#gewinnung #fuss h3 {
	margin-left: 395px;
	width: 390px;
	height: 36px;
	background: transparent url(../img/schriftbilder/gewinnung.gif) no-repeat top left;
}
#kosmetik #fuss h3 {
	margin-left: 654px;
	width: 124px;
	height: 31px;
	background: transparent url(../img/schriftbilder/kosmetik.gif) no-repeat top left;
}
#geschichte #fuss h3 {
	margin-left: 457px;
	width: 319px;
	height: 31px;
	background: transparent url(../img/schriftbilder/stutenmilch-geschichte.gif) no-repeat top left;
}
#reiten #fuss h2 {
	margin-left: 687px;
	width: 88px;
	height: 29px;
	background: transparent url(../img/schriftbilder/reiten.gif) no-repeat top left;
}
#kinderreitwoche #fuss h2 {
	margin-left: 546px;
	width: 230px;
	height: 31px;
	background: transparent url(../img/schriftbilder/kinderreitwochen.gif) no-repeat top left;
}
#pferdefluestern #fuss h2 {
	margin-left: 584px;
	width: 185px;
	height: 31px;
	background: transparent url(../img/schriftbilder/pferdefluestern.gif) no-repeat top left;
}
#kraeuter #fuss h2 {
	margin-left: 524px;
	width: 248px;
	height: 31px;
	background: transparent url(../img/schriftbilder/kraeutermanufaktur.gif) no-repeat top left;
}
#produktion #fuss h2 {
	margin-left: 428px;
	width: 339px;
	height: 32px;
	background: transparent url(../img/schriftbilder/kraeuter_produktionsweise.gif) no-repeat top left;
}
#teetrinken #fuss h2 {
	margin-top: 2px;
	margin-left: 422px;
	width: 365px;
	height: 35px;
	background: transparent url(../img/schriftbilder/teetrinken.gif) no-repeat top left;
}
#hofladen #fuss h2 {
	margin-left: 646px;
	width: 126px;
	height: 31px;
	background: transparent url(../img/schriftbilder/hofladen.gif) no-repeat top left;
}
#exkursionen #fuss h2 {
	margin-left: 606px;
	width: 166px;
	height: 31px;
	background: transparent url(../img/schriftbilder/exkursionen.gif) no-repeat top left;
}
#mitarbeiten #fuss h2 {
	margin-left: 621px;
	width: 154px;
	height: 30px;
	background: transparent url(../img/schriftbilder/mitarbeiten.gif) no-repeat top left;
}
#wwoof #fuss h2 {
	margin-left: 622px;
	width: 153px;
	height: 32px;
	background: transparent url(../img/schriftbilder/wwoof.gif) no-repeat top left;
}
#sommereinsaetze #fuss h2 {
	margin-left: 428px;
	width: 347px;
	height: 36px;
	background: transparent url(../img/schriftbilder/sommereinsaetze.gif) no-repeat top left;
}
#oekologisches #fuss h2 {
	margin-left: 394px;
	width: 383px;
	height: 36px;
	background: transparent url(../img/schriftbilder/oekologisches.gif) no-repeat top left;
}
#kontakt #fuss h2 {
	margin-left: 665px;
	width: 113px;
	height: 31px;
	background: transparent url(../img/schriftbilder/kontakt.gif) no-repeat top left;
}
#impressum #fuss h2 {
	margin-top: 1px;
	margin-left: 645px;
	width: 133px;
	height: 38px;
	background: transparent url(../img/schriftbilder/impressum.gif) no-repeat top left;
}
#anfahrt #fuss h2 {
	margin-left: 481px;
	width: 297px;
	height: 35px;
	background: transparent url(../img/schriftbilder/anfahrtsbeschreibung.gif) no-repeat top left;
}
#links #fuss h2 {
	margin-left: 704px;
	width: 74px;
	height: 31px;
	background: transparent url(../img/schriftbilder/links.gif) no-repeat top left;
}
#gaestebuch #fuss h2 {
	margin-left: 628px;
	width: 146px;
	height: 30px;
	background: transparent url(../img/schriftbilder/gaestebuch.gif) no-repeat top left;
}

/* =============== Seitenspezifisches: =============== */

#home #kopf {
	margin-bottom: 30px;
}
#home #inhalt {
	margin: 0 25px 12px;
	padding: 0;
	height: 390px;
}
#home #inhalt img {
	margin-top: 19px;
	width: 125px;
	height: 100px;
}
#home #inhalt #logo {
	position: absolute;
	/* bei voller Größe:
	top: 25px;
	left: 480px; */
	top: 0;
	left: 507px;
}
#home #inhalt #startbild {
	margin-top: 0;
	width: 750px;
	height: 300px;
}

#ueber_uns #inhalt #logo {
	display: block;
	margin: 2em auto 1.5em auto;
}

#online_bestellung #inhalt {
	position: relative;
	padding-top: 48px; /* margin-top beachtet ie < 8 nicht! */
	height: 390px;
	overflow: auto;
}
#online_bestellung #wwh-logo {
	position: absolute;
	top: 27px;
	left: 2px;
	border: 0;
	width: 118px;
	height: 75px;
}
#online_bestellung h3 {
	margin: 0.2em 0 0.1em;
	font-size: 1.2em;
	text-align: center;
}
#online_bestellung p {
	margin-top: 0;
	text-align: center;
}
#online_bestellung form p {
	margin: 0.7em 10em;
	text-align: left;
}
#online_bestellung form {
	margin: 0;
	padding: 0;
	height: 300px;
	overflow: auto;
}
#online_bestellung table {
	table-layout: fixed;
	border-collapse: collapse;
}
#online_bestellung table td {
	padding: 0.3em 0.3em 0.2em;
	border: 1px solid #fbf09e;
}
#online_bestellung #preislistenkopf td {
	padding: 0.4em 0.3em 0.3em; 
	color: #fbf09e;
	font-weight: bold;
	background-color: #cc3;
}
#online_bestellung #preisliste {
	margin-bottom: 1em;
}
#online_bestellung #preisliste input {
	width: 22px;
}
#online_bestellung #preisliste td {
	vertical-align: bottom;
	background: #ffc;
}
#online_bestellung #preisliste tr.abschnitt td {
	padding-top: 1em;
	background: #fbf09e;
}
#online_bestellung small {
	font-size: 0.85em;
}
#online_bestellung fieldset {
	border: 1px solid #fbf09e;
}
#online_bestellung #bestelldaten label, #online_bestellung #bestelldaten input {
  float: left;
	display: inline; /* gg. double margin bug in ie6 */
	margin: 2px 0;
	padding: 0;
}
#online_bestellung #bestelldaten label {
	text-align: right;
  width: 230px;
	padding-right: 0.8em;
  line-height: 26px;
}
#online_bestellung #bestelldaten input {
  width: 350px;
}
#online_bestellung #bestelldaten input#submit {
	float: right;
	display: inline; /* gg. double margin bug in ie6 */
	margin-top: 15px;
	margin-bottom: 0;
 	width: auto;
}
#online_bestellung #bestelldaten br { 
  clear: left; /* das floating der labels und inputs aufheben */
}

/* ===============  noch nicht in Gebrauch: =============== */

h1, h2 {
	font-weight: normal;
}
h1 {
	margin: 0 0 1em;
	font-size: 2.0em;
}
h2 {
	margin: 1.7em 0 1em;
}
h2 {
	font-size: 1.7em;
}
h5 {
	font-size: 1.0em;
}
h6 {
	font-size: 0.8em;
}

/* Kontaktformular: */

#kontaktform {
  margin: 0;
  border: 1px solid #00265d;
  padding: 20px;
  height: 370px;
  width: 420px;
	background-color: #eef6fc;
}
#kontaktform fieldset {
	margin: 0;
	padding: 0;
	border: none;
}
#kontaktform strong {
	font-size: 93%;
}
#kontaktform label, #kontaktform input, #kontaktform textarea {
  float: left;
	display: inline; /* gg. double margin bug in ie6 */
	margin: 2px 0;
	padding: 0;
}
#kontaktform label {
	text-align: right;
  width: 130px;
	padding-right: 0.8em;
  line-height: 26px;
}
#kontaktform input, #kontaktform textarea {
  width: 260px;
}
#kontaktform textarea {
	height: 150px;
}
#kontaktform input#submit {
	float: right;
	display: inline; /* gg. double margin bug in ie6 */
	margin-top: 15px;
	margin-bottom: 0;
 	width: auto;
}
#kontaktform br { 
  clear: left; /* das floating der labels und inputs aufheben */
}