@charset "UTF-8";
/* Stylesheet Uta Kaufhold | Marketing und Kommunikationsdesign */

/* ======================================
1. Kalibrierung und Restauration
====================================== */
* { padding: 0; margin: 0; }
html { height: 101%; }
/* Abstand nach unten */
h2, h3, p, ul, ol { margin-bottom: 1em; }
/* Verschachtelte Listen ohne Abstand */
ul ul { margin-bottom: 0; }
/* Abstand von links */
li { margin-left: 1em; }

/* ======================================
2. Allgemeine Styles
====================================== */
body {
	background-color: #9ea7ae; /* Hintergrundfarbe */
	background-image:url(bilder/hg1.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-attachment: fixed;
	color: white; /* Schriftfarbe */
	font-family: Verdana, Geneva, sans-serif;
	font-size: small; /* Schriftgröße */
}
h1 { font-size: 150%; }
h2 {
	font-size: 130%;
	color: #3E5164;
}
h3 { font-size: 110%; }
address {
  text-align: left; /* zentrieren */
  font-size: 80%; /* etwas kleiner als der Rest */
  font-style: normal; /* normale Schrift, nicht kursiv */
  letter-spacing: 0,3em; /* Abstand zwischen den Buchstaben */
  line-height: 1.5; /* Zeilenabstand, ohne Einheit */
}
a { text-decoration: none; } /* Unterstreichung entfernen */
a:link { color: #3d4f5c; 
}
a:visited { color: #3d4f5c; }
a:hover,
a:focus {
  border-bottom: 1px solid #3d4f5c;
}
a:active {
  color: white;
  background-color: #3d4f5c;
  background-image:url(bilder/transparent.png);
}
img#logo {
	/*background-color: white;*/
  color: #3d4f5c; /* border: 10px solid #d9d9d9;*/
	padding-bottom: 40px;
}
.bildlinks {
  float:left;
  padding: 2px;
  border: 1px solid #9ea7ae;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 6px 6px 6px 6px;
}
.bildrechts {
  float:right;
  padding: 2px;
  border: 1px solid #9ea7ae;
  margin-bottom: 10px;
  margin-left: 10px;
  border-radius: 6px 6px 6px 6px;
}
.clearing { clear: both; 
}
.button {
  float:right;
}

/* =======================================
3. Styles für die Layoutbereiche
======================================= */
div#wrapper {
	/*background-color: #FFF;*/
	color: #3d4f5c;
	width: 720px; /* Breite des Inhaltsbereichs */
	margin-top: 0;
	margin-right: auto; /* Abstand rechts */
	margin-bottom: 10px;
	margin-left: auto; /* Abstand links */
}
#kopfbereich {
	/*background-color: #f3c600;*/ 
	position: relative;
	color: #3d4f5c;
	background: url(bilder/verlauf_1.png) repeat-y top left;
	padding: 80px 20px 20px 40px;
}
#kopfbereich p {
	position:absolute;
	top: 10px;
	right: 10px;
	padding: 60px 0 10px 30px;
	margin-bottom: 0;
	margin-right: -20px;
	}
div#kopfbereich p span {
		color: #d90000; /* Schriftfarbe */
		}
div#navibereich {
	text-align: right; /* rechtsbündig */
	color: #3d4f5c;
	background: /*#f3c600*/ url(bilder/verlauf_1.png) repeat-y top left;
	padding: 5px 0 4px 10px;
	border-bottom: 1px solid #8c8c8c;
}
#navibereich a:hover,
#navibereich a:focus {
  color: #3d4f5c;
  background-color: white;
  /*background-image:url(bilder/transparent.png);*/
  /*border-bottom-color: white;*/ /* war #d90000 */
}
#navibereich a:active {
  color: #3d4f5c;
  background-color: white;
  /*background-image:url(bilder/transparent.png);*/
  border-bottom-color: white;
}
#navibereich ul { margin-bottom: 0;
}
#navibereich li {
    display: inline; /* li nebeneinander anzeigen */
    list-style-type: none; /* ohne Aufzählungspunkte */
	margin: 0; /* war vorher 10px für rechts */
  }
#navibereich a {
	color: #3d4f5c;
	background-color: #d8dcde;
	padding: 4px 10px 4px 10px;
	border: 1px solid #8c8c8c;
	border-radius: 6px 6px 0px 0px;
  }
#startseite #navi01 a,
#galerieseite #navi02 a,
#kontaktseite #navi03 a,
#impressum #navi04 a {
  color: #3d4f5c;
  /*background-image:url(bilder/transparent.png);*/
  background-color: white;
  border-bottom-color: white;
}
div#textbereich {
  /*background-color: #FFF;*/
  background-image:url(bilder/transparent.png);
  padding-top: 20px ;
  padding-right: 40px;
  padding-bottom: 20px;
  padding-left: 40px;
}
div#fussbereich {
	/*background-color: #d8dcde;*/
	background-image:url(bilder/fusshg.png);
	padding-top: 20px; /* unterhalb Rahmenlinie */
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 40px;
	border-top: 1px solid #8c8c8c;
	margin-top: 0;
	border-radius: 0px 0px 6px 6px;
	/*margin-bottom: 20x;*/
}
div#textbereich a {
  border-bottom: 1px dotted #cc0000;
}
div#textbereich a:hover,
div#textbereich a:focus {
  border-bottom: 1px solid #d90000;
}
/* ======================================
4. Sonstige Styles
====================================== */
/* Das Kontaktformular */ 
form {
	/*background-color: #cf9a96;*/
	background-image:url(bilder/formhg.png);
	width: 50%; /* Breite des Formulars */
	padding: 20px;
	border: 1px solid #8c8c8c;
	border-radius: 6px 6px 6px 6px;
}
label { /* Beschriftung auf eigener Zeile */
	display: block;
	cursor: pointer; /* Mauszeiger wird zur Hand */
	width: 70%;
}
input#name, #absender,
textarea {
  width: 300px;
  border: 1px solid #8c8c8c;
  margin-bottom: 1em;
}
textarea {
	height: 7em;
}
input:focus,
textarea:focus {
  background-color: #d9d9d9;
}
/* Die kleine Galerie */
div.galerie {
	overflow: hidden; /* zum Einschließen der Floats */
	padding: 25px 10px 10px 0;
	margin: 0 3px 3px 0;
}
div.galerie img {
  float: left;
  padding: 4px;
  border: 1px solid #ddd;
  border-right-color: #aaa;
  border-bottom-color: #aaa;
  margin-right: 15px;
  margin-bottom: 15px;
  border-radius: 6px 6px 6px 6px;
}