/*	Autor:						Claude Roulet
	Autor URL:					http://exquisito.ch/
	Kunden URL:					http://garten-zollinger.ch/
	Angelegt:					2008-05-09
	Letzte Änderungen:			2012-01-15		*/

* {
	margin: 0;
	padding: 0;
	border: 0 none;
	outline: 0 none;
	background: transparent;
}

html {
	font-size: 100%;
}

article, aside, canvas, details, embed, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}

a { 
	text-decoration: none;
}

table {							/* Im HTML ist cellspacing="0" notwendig! */
	border-collapse: collapse;
	border-spacing: 0;
}

th, td {
	text-align: left;
	vertical-align: top;
}


body {
	font-family: "Arial Narrow", "Helvetica Neue Condensed Medium", "HelveticaNeue-CondensedMedium", "DejaVu Sans Condensed", "DejaVuSansCondensed", Arial, "Helvetica Neue", "HelveticaNeue", Helvetica, sans-serif;
}

h1, h2, h3 {
	font-family: "Arial Narrow", "Helvetica Neue Condensed Bold", "HelveticaNeue-CondensedBold", "DejaVu Sans Condensed Bold", "DejaVuSansCondensed-Bold", Arial, "Helvetica Neue", "HelveticaNeue", Helvetica, sans-serif;
}


@media screen {

body {
	font-size: .875em;			/* 14px */
	line-height: 1.5;			/* 21px */
	color: #fff;
	text-align: left;
	padding-bottom: 30px;
	background: #197e91;
}

p, ul, ol, dl {
	margin-bottom: .5em;
}

a {
	color: #075160;
	border-bottom: 1px solid #075160;
}

a:hover, a:focus, a:active {
	color: #fff;
	border-color: #fff;
}

a:focus {
	outline: thin dotted;
}

a img {
	border: 0 none;
}

abbr {
	font-size: .929em;
}

abbr[title] {
	border-bottom: 1px dotted #c0d5dc;
	cursor: help;
}

a abbr[title] {
	cursor: pointer;
	border: 0 none;
}

.eng {
	word-spacing: -.071em;
	margin: auto 0;
}


#wrapper {
	width: 960px;
	position: relative;
	margin: 20px auto 0;
	background: url(/grafiken/falsche-spalte.png) repeat-y;
}


/*	Header
––––––––––––––––––––––––– */

header h1 {
	width: 210px;
	height: 90px;
	position: absolute;
	left: 30px;
	top: 194px;
	text-indent: -999em;
	background: url(/grafiken/zollinger+stettler.png) no-repeat;
}

header p, nav p {				/* Sprunglinks */
	position: absolute;
	left: -200em;
	top: -200em;
	width: 0px;
	height: 0px;
	overflow: hidden;
	display: inline;
}


/*	Section
––––––––––––––––––––––––– */

section {
	min-height: 458px;
	height: auto !important;
	height: 458px;
	padding: 267px 30px 30px 606px;
	background: url(/grafiken/hintergrund-kraut.png) no-repeat;
}

#team section {
	min-height: 380px;
	height: auto !important;
	height: 380px;
	padding: 350px 30px 30px 606px;
}

section h1, #team section h2, #gartentipps h2 {
	font-size: 1.429em;			/* 20px */
	line-height: 1.2;			/* 24px */
	padding: 12px 0 0;			/* bestimmt die Position zum Fotoblock */
	margin: 0 0 .6em;
}

section h2, #team section h3, #gartentipps h3 {
	font-size: 1.143em;			/* 16px */
	padding: .75em 0 0;
	margin: 0 0 .313em;
}

section h3 {
	font-size: 1.143em;			/* 16px */
	padding: .75em 0 0;
	margin: 0 0 .313em;
}

section h1 + h2, #team section h2 + h3, #gartentipps h2 + h3 {
	padding-top: 0;
}

section ul {
	padding-left: 1.214em;
}


/*	Startseite
––––––––––––––––––––––––– */

#default section {
	min-height: 210px;
	height: auto !important;
	height: 210px;
	padding: 515px 30px 30px 606px;
	background: url(/grafiken/hintergrund-tischli.png) no-repeat;
}

#default section h2 {
	font-size: 2em;				/* 28px */
	font-weight: normal;
	line-height: 1.357;			/* 38px */
	text-indent: -.321em;
	margin-bottom: .429em;		/* 12px */
}

#default section p a {
	color: #fff;
	border: 0 none;
}


/*	Fotoblock
––––––––––––––––––––––––– */

#fotoblock-ueberblenden, #fotoblock {
	width: 315px;				/* 306px + 9px Platz nach rechts berücksichtigt, wegen margin-right 9px der Miniaturen. */
	height: 548px;
	position: absolute;
	left: 270px;
	top: 150px;
	line-height: 0;
}

#fotoblock-ueberblenden ul, #fotoblock ul {
	padding: 0;
	margin: 0;
}

#fotoblock-ueberblenden li, #fotoblock li {
	width: 96px;
	height: 128px;
	float: left;
	list-style: none;
	cursor: pointer;
	padding: 0 9px 12px 0;
}

#fotoblock-ueberblenden li div, #fotoblock li {
	cursor: default;
}

#fotoblock-ueberblenden li img, #fotoblock li img {
	width: 96px;
	height: 128px;
}

#fotoblock-ueberblenden li div, #fotoblock li div {
	position: absolute;
	top: 140px;
	left: 0;
	display: none;
}

#fotoblock-ueberblenden div img, #fotoblock div img, #fotoblock-ueberblenden li div img {
	width: 306px;
	height: 408px;
	margin: 0 9px 0 0;
}


/*	vCard
––––––––––––––––––––––––– */

.street-address, .country-name {
	display: block;
}

.country-name {
	font-weight: bold;
	padding-top: .5em;
}

.vcard dt {
	width: 5em;
	float: left;
	display: inline;
}

.vcard dd {
	margin-left: 5em;
}

.tel a, a[href^="tel"] {
	color: #fff;
	border: 0 none;
	cursor: default;
}

.fn, .type, .country-name, .url {
	display: none;
}


/*	Formular
––––––––––––––––––––––––– */

label, input, textarea, button {
	display: block;
	font-family: inherit;	/* ohne Angabe benutzt FF in 'textarea' monospace */
	font-size: 1em;
	font-weight: normal;
	color: #075160;
}

label {
	cursor: pointer;
	padding: .5em 0 0;
	margin: 0 0 .214em 6px;
	color: #fff;
}

label span {
	display: none;
}

label abbr {
	border: 0 none;
}

input, textarea, #details, #notwendig, #falle {
	width: 310px;
	padding: .214em 6px;
	background: #6aa0ae;
	background: rgba(89, 149, 165, .7);
	border: 1px solid #5995a5;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#details, #notwendig, #falle {
	padding: .357em 6px;
	margin: 0 0 1em;
}

#notwendig, #falle {
	color: #a64634;
	background: #ffe3a0;
	border-color: #ffca4b;
}

#details h2, #notwendig h2, #falle h2 {
	font-size: 1em;
	padding: 0;
}

#details p, #notwendig p, #falle p {
	margin: 0;
}

input:hover, input:focus, input:active, textarea:hover, textarea:focus, textarea:active {
	border: 1px solid #197e91;
}

input:focus, textarea:focus {
	outline: 1px solid #197e91;
	background: #7faab7;
	background: rgba(127, 170, 183, .6);
}

label.checkbox {
	position: relative;
	padding: 0 0 0 28px;
}

.checkbox input {
	position: absolute;
	top: .375em;
	left: 1px;
	width: 14px;
	background: transparent;
	border: 0 none;
}

button {
	position: relative;
	line-height: 1;
	font-size: 1em;
	font-weight: bold;
	letter-spacing: .071em;
	color: #fff;
	border: 0 none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	margin: 1em 0;
	padding: .357em .786em .429em;
	background: #197e91;
}

button:hover, button:focus, button:active {
	background: #5995a5;
}

div#plz {
	width: 75px;
	float: left;
	*margin-right: 15px;
}

#plz abbr {
	border: 0 none;
}

input#postleitzahl {
	width: 61px;
}

div#ort {
	width: 234px;
	margin-left: 90px;
	*margin: 0;
}

input#ortschaft {
	width: 220px;
}

textarea {
	margin: 0 0 1em;
	overflow: auto;			/* eliminiert im IE die standardmässig gezeigte Scrollleiste */
}

#lilie {					/* Für FF Win, unverständlich, da <input type="hidden" /> */
	display: none;
}

#blume input {
	width: 1.5em;
}


/*	Nav allgemein
––––––––––––––––––––––––– */

nav {
	width: 190px;
	position: absolute;
	left: 30px;
	top: 365px;
	text-align: right;
	padding: 0 15px 100px 5px;
}

nav h2, #team nav h2, #gartentipps nav h2 {
	font-size: 1.077em;			/* 15px */
	line-height: 1.5;
	padding: 0;
	margin: 0 0 1.667em;
}

nav ul {
	color: #075160;
	list-style: none;
	margin: 0;
}

nav a {
	border: 0 none;
}


/*	Nav Zollinger
––––––––––––––––––––––––– */

#nav-zollinger {
	position: absolute;
	width: 352px;
	top: -221px;
	left: 571px;
	text-align: left;
	padding: 0;
}

#nav-zollinger li, #nav-zollinger #aktiv {
	position: relative;
	display: inline;
	padding: 2em .357em .357em;
	margin: 0 9px 0 0;
	cursor: pointer;
}

#nav-zollinger li:hover, #nav-zollinger li:focus, #nav-zollinger li:active, #nav-zollinger li a:hover, #nav-zollinger li a:focus, #nav-zollinger li a:active {
	color: #fff;
}

#nav-zollinger li#aktiv {
	color: #fff;
	font-weight: bold;
	letter-spacing: .036em;
	cursor: default;
}


/*	Subnav Zollinger
––––––––––––––––––––––––– */

.subnav-1 ul {
/*	display: none; */
	visibility: hidden;
	width: auto;
	line-height: 1;
	padding: 0 0 1.5em;
	margin: 0;
}

.subnav-1 > ul {
	position: absolute;
	top: 3.5em;
	left: -.143em;
	width: auto;
}

#nav-zollinger li ul li {		/* reset für Erbe von #nav-zollinger li & #nav-zollinger #aktiv, entspricht .subnav-1 ul li */
	display: block;
	position: relative;
	font-weight: normal;
	letter-spacing: normal;
	padding: 0;
	margin: 0;
}

.subnav-2 ul {
	position: absolute;
	top: 0;
	left: -13.5em;				/* width & left werden durch jQuery überschrieben */
	width: 13.5em;
}

.subnav-1:hover > ul, .subnav-1:focus > ul, .subnav-1:active > ul, .subnav-2:hover > ul, .subnav-2:focus > ul, .subnav-2:active > ul {
/*	display: block;				funktionierte nicht mit Safari 5.1 */
	visibility: visible;
}

.subnav-1 a, .subnav-2 span, #nav-zollinger li.aktiv {
	display: block;
	color: #075160;
	white-space: nowrap;
	padding: .5em 1em;
	background: #5995a5;
}

.subnav-1 a:hover, .subnav-1 a:focus, .subnav-2 span:hover, .subnav-2 span:focus {
	color: #fff;
	background: #7fabb7;
}

.subnav-1 a:active, .subnav-2 span:active {
	color: #075160;
	background: #6aa0ae;
}

#nav-zollinger .subnav-1 li.aktiv {
	font-weight: bold;
	color: #fff;
}


/*	Links
––––––––––––––––––––––––– */

#link-bioterra {
	display: block;
	width: 120px;
	height: 45px;
	position: absolute;
	left: 120px;
	top: 662px;
	text-indent: -999em;
	background: url(/grafiken/logo-bioterra.png) no-repeat;
	border: 0 none;
}


/*	Nav Gartenphilosophie
––––––––––––––––––––––––– */

#nav-gartenphilosophie li {
	line-height: 1.214;
	margin-bottom: 1.429em;
}

#nav-gartenphilosophie .aktiv {
	color: #fff;
}


/*	Footer
––––––––––––––––––––––––– */

footer {
	width: 324px;
	font-family: "Helvetica Neue", "HelveticaNeue", Arial, Helvetica, Garuda, sans-serif;
	font-size: .786em;			/* 11px */
	color: #7fabb7;
	padding: 1.455em 30px 2em 606px;
	margin: 0 auto;
}

footer span {
	margin: auto 1em;
}

footer abbr {
	font-size: .909em;			/* 10px */
}

footer a {
	color: #7fabb7;
	border: 0 none;
}

footer a:hover, footer a:focus, footer a:active {
	color: #c0d6dc;
}

footer a.feed {
	padding: .3em 0 .3em 22px;
	background: url(/grafiken/icon-feed-16.png) no-repeat 0 50%;
	margin-left: 3em;
}

footer a[href="/impressum"] + span {
	position: absolute;
	left: -300em;
	top: -300em;
	width: 0px;
	height: 0px;
	display: inline;
	overflow: hidden;
}


/*	Clear
––––––––––––––––––––––––– */

#fotoblock-ueberblenden ul:after, #fotoblock ul:after, dl:after {
	content: "."; 
	height: 0; 
	clear: both; 
	display: block; 
	visibility: hidden;
}

}	/* Ende screen */



@media print {

/*	Nicht drucken
––––––––––––––––––––––––– */

header p, img, #fotoblock-ueberblenden, #fotoblock, nav, #link-bioterra, footer, #kontakt h1, .vcard .type {
	display: none !important;
}


/*	Drucken
––––––––––––––––––––––––– */

body {
	font-size: 10pt;
	color: #000;
	line-height: 1.5;
	text-align: left;
	padding: 12mm 20mm 27mm 20mm;
	background: #fff;	
}

h1 {
	font-size: 12pt;
}

header h1 {
	color: #197e91;
	margin: 0 0 15pt;
}

section h1, #team section h2, #gartentipps h2 {
	color: #444;
	margin: 0 0 10pt;
}

section h2, #team section h3, #gartentipps h3 {
	font-size: 11pt;
	padding: 8pt 0 0;
	margin: 0 0 5pt;
}

section h3 {
	font-size: 10pt;
	padding: 8pt 0 0;
	margin: 0 0 5pt;
}

section h1 + h2, #team section h2 + h3, #gartentipps h2 + h3 {
	padding-top: 0;
}

p, ul, ol, dl {
	margin-bottom: 5pt;
}

ul {
	padding-left: 7mm;
}

a { 
	color: #222;
}

a:after { 
	content: "";
}

a[href^='http://'] {
	font-size: 9pt;
	font-weight: bold;
	color: #444;
}

a[href^='http://']:after { 
	content: " ("attr(href)")";
	font-size: 9pt;
	font-weight: normal;
	color: #444;
}

a[href^='http://garten'] {
	font-size: 10pt;
	font-weight: normal;
	color: #444;
}

a[href^='http://garten']:after { 
	content: "";
}

abbr {
	font-size: 10pt;
}

abbr[title]:after {
	content: " ("attr(title)")";
}

.street-address, .country-name {
	display: block;
}

.country-name {
	font-weight: bold;
	padding-top: 5pt;
}

.vcard dt {
	width: 20mm;
	float: left;
	display: inline;
}

.vcard dd {
	margin-left: 20mm;
}

footer {
	font-size: 9pt;
	padding-top: 36pt;
}

footer a[href^='http://'], footer a[href^='http://']:after, footer abbr[title]:after {
	font-size: 9pt;
	font-weight: normal;
	color: #000;
}

footer abbr {
	font-size: 8.5pt;
}

.eng {
	word-spacing: -2pt;
}

dl:after {
	content: "."; 
	height: 0; 
	clear: both; 
	display: block; 
	visibility: hidden;
}

}	/* Ende print */