/* Stylesheet erstellt von Trade In Ingold, CH-3376 Graben, www.tradein.ch */
/* Dieses Stylesheet definiert das Layout, also alles, was mit Groesse, Abstand, Breite etc. zu tun hat. */
/* Da es floatende Elemente enthaelt, wird mit der import Methode eingebunden, damit es von alten Browsern nicht verarbeitet wird */

* { /* entfernt alle Standard-Abstaende */
	margin:0;
	padding:0;
	border:0;
}

/* Allgemeines */

body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #ccc;
	font-size: 100.01%;
	color: #333;
}

#hauptbox {    /* das ist die Box um alles herum */
  background-color: #fff;
  position:absolute;
  top:50%;  /* 50% */
  left:50%; /* 50% */
  width:952px;
  height:484px;
  margin-left:-476px; /* -476px */
  margin-top:-260px; /* -240px */
}

#hauptbox.index, #inhalt.index, #inhalt_oben.index, #inhalt_unten.index {    /* das ist die Box um alles herum */
  background-color: #003488;
}

/* Stile, Farben etc. */

a {
	color: #999;
	text-decoration: none;
}

a:hover {
	color: #36C;
	text-decoration: underline;
}

dt {
	font-size: 80%;
	width: 4em;
	float: left;
	padding-bottom: 14px;
	}
dd {
	margin-left: 4.5em;
	padding-bottom: 14px;
	}

em {
	font-style: normal;
	color: #36c;
}

h1, h2, h3, h4, h5, p, li {
	font-size: 80%;
	line-height: 17px;
}

h1, h2, h3, h4, h5 {
	color: #36C;
	font-weight: normal;
	}
	
input, textarea, select {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
	background: #fff;
	color: #999;
	cursor: pointer;
	width: 4.5em;
	text-align: left;
}
input.textField, textarea.textField, select.textField {
	width: 15em;
	border: 1px solid #999;
	color: #333;
	padding: 1px;
	cursor: auto;
}
	
p {padding-bottom: 17px;} /* wie #inhalt ul */

	
/* Navigation  */

#navi {
	position: relative;
	float: left;
	width: 175px; /* width 280px minus padding left und right */
	padding: 60px 20px 20px 85px;
	height: 404px; /* hoehe 484px minus padding top und bottom */
	background-color: #003488;
	color: #999;
	} 
	
#navi a {
	color: #999;
	text-decoration: none;
}
#navi a.aktiv {
	color: #fff;
}

#navi a:hover {
	color: #ccc;
}

#navi ul li a.mail {
	padding-left: 25px;
	background-image: url(../images/mail.gif);
	background-repeat:no-repeat;
}
#navi ul li a:hover.mail {
	background-image: url(../images/mail2.gif);
	background-repeat:no-repeat;
}

#navi ul li {
	list-style-type: none;
}

#navi ul li ul {
	padding-bottom: 17px;
}

#navi ul li ul li {
	font-size: 100% /* das ergibt dann wieder 80%... */
}

#navi ul li ul li a {
	padding-left: 10px;
	background-image: url(../images/listenpunkt.gif);
	background-repeat: no-repeat;
}
#navi ul li ul li a:hover, #navi ul li ul li a.aktiv {
	background-image: url(../images/listenpunkt2.gif);
	background-repeat: no-repeat;
}
#logo {
	position: absolute;
	left: 55px;
	bottom: 30px;
}

#logo_start {
	position: absolute;
	left: 85px;
	bottom: 182px;
}

/* Inhalt */
	
#inhalt {
	background-color: #fff;
	position: relative;
	padding-top: 60px;
	height: 424px; /* Hoehe 484px minus padding-top */
	width: 672px;
	overflow: auto;
}

#inhalt2 { /* fuer 2-Spaltigen Inhalt, nur Hoehe ist anders */
	background-color: #fff;
	position: relative;
	padding-top: 60px;
	height: 408px; /* Hoehe 484px minus padding-top minus 16px für unteren Rand */
	width: 672px;
	overflow: auto;
}

	#inhalt ul, #inhalt2 ul {
		padding-bottom: 17px;  /* wie p */
	}

	#inhalt ul li, #inhalt2 ul li {
		margin-left: 14px;
		padding-left: 0px;
		list-style-image: url(../images/listenpunkt3.gif);
		list-style-position: outside;
	}
	
	#inhalt_ganz {
		height: 424px; /* Hoehe 484px minus margin-top */
		width: 544px; /* Breite 672 minus padding-left und right minus 16px Scrollbalken */
		padding-left: 85px;
		padding-right: 27px;
	}

	#inhalt_oben {
		height: 154px; /* Hoehe 484px minus Bildhoehe 270px minus margin-top */
		width: 560px; /* Breite 672 minus padding-left und right */
		padding-left: 85px;
		padding-right: 27px;
		overflow: auto;
	}
		#inhalt_oben_drucken {
		position: absolute;
		left: 370px;
		top: 60px;
	}
	
	#inhalt_unten {
		position: relative;
		width: 672px;
		height: 270px;
	}
	#inhalt_links, #inhalt_links_iphone { /* Seiten, die nur inhalt_links zeigen, sollen auf dem iphone die ganze Breite einnehmen. */
		float: left;
		padding-left: 85px;
		width: 263px; /* Breite 350px minus padding-left - minus 2px Korrektur */
		height: 408px; /* wie Hoehe inhalt2 */
	}
	#inhalt_rechts {
	margin-left: 360px;
	padding-right: 20px;
	width: 276px; /* Breite 312px minus padding-right minus 16px Scrollbalken */
	height: 408px; /* wie Hoehe inhalt2 */
		}
		
	#inhalt_legende {
		position: absolute;
		bottom: 8px;
		left: 85px;
	}
		#inhalt_legende p {
			padding-bottom: 0px;
		}

/* Gemeinsame Klassen */

#inhalt .nopdgbottom, #inhalt2 .nopdgbottom {padding-bottom: 0px;}
.invisible {display: none;}