/* 
===================================
Stylesheet für pörtnerwebdesign - erstellt am 1. November 2008
===================================

===================================
1. Kalibrierung und allgemeine Styles
===================================*/

/* ::: Kalibrierung der wichtigsten Abstände */

* {padding: 0; margin: 0; } /* "kalibriert" sozusagen alle Abstände auf Null. Vereinheitlichung aller Abstände. */

/* Das Zurücksetzen der Abstände verursacht zu kleine Selectboxen. */
  option { padding-left: 0.4em }
  
/* Abstand nach unten definieren */
h1, h2, h3, p, ul, ol { margin-bottom: 0.5em; }

/* Verschachtelte Listen ohne Abstand */
ul ul { margin-bottom: 0; }

/* Abstand von links */
li { margin-left: 3em; }

/* ::: Allgemeine Selektoren */

html { height: 101%; } /* erzwingt Scrollbar im Firefox */

body { /* Gestalte das HTML-Element mit dem Namen body */
	position:relative;
	width: 770px; /* Breite des Inhaltsbereiches*/
	margin-left: auto;
	margin-right: auto;
	color: #333;  /* Schriftfarbe*/
	
	background: #c3c1b2 url(bild/hintergrund_verlauf.jpg) center top repeat-x;
	/*background-image: url(bild/conqueror_papier_kachel_dkl.jpg); */
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
	font-size: 11px;
	text-align: center;
	}
	
h1 { font-size: 200%; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif; color: #333; line-height: 26px; }
h2 { font-size: 130%; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif; color: #333; line-height: 24px; }
h3 { font-size: 110%; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif; color: #333; line-height: 22px; }
	
/* ::: Hyperlinks allgemein */

a { text-decoration: none; outline: none; }
a:link,
a:visited { 
	color: #663; 
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
	font-size: 90%;
	font-variant: small-caps;
	font-weight: bold;
	letter-spacing: 0.1em;
	background-color: #fff;
	}
a:hover, a:focus { 
	color: #000; 
	background-color: #FFC900;
	/*background-image: url(bild/link_background.gif);  */
	}
a:active { 
	color: #000; 
	background-color: #FFF;
	 }
	 
	
/* ::: Allgemeine Klassen und IDs */

#wrapper { /* enthält #navigation und #foto */
	float: left;
	width: 340px;
	margin: 0;
/*	background-color: #E5DFD3;  */
	}

#foto { /* enthält #bild und #zitat*/
	float: left;
	width: 230px;
	margin: 0;
	padding: 0;
	}

#inhalt { /* enthält #logo und #content */
	float: right;
	top: 0;
	width: 430px;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: left;
/*	background-color:#E5DFD3; */
	}
	
/* IE Hack */
* html #inhalt {
    clear: both;
    width: 476px;
    }
	
#bild { /* Foto auf Homepage und Inhaltsseiten*/
	position: relative;
	width: 230px;
	height: 230px;
	text-align: right;
	top: 204px;
	padding: 0;
	border: 0;
	}
	
#logo {
	float: right;
	width: 380px;
	height: 222px;
	margin-top: 0;
	margin-bottom: 10px;
	margin-right: 0;
	padding: 0;
	border: 0;
	/*background-color: #CC3399; */
	}
	
	#logo a,
	#logo a:hover,
	#logo a:focus { 
	background-color: transparent;
	}
	
#zitat {
	position: relative;
	width: 230px;
	text-align: right;
	font-size: 105%; 
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif; 
	color: #333; 
	line-height: 20px;
	top: 204px;
	margin: 0;
	border: 0;
	padding: 0;
	}
	
#navigation { 
	float: right;
	top: 0;
	left: auto;
	width: 100px;
	background-color: #fff; /* Hintergrundfarbe*/
	/* background-image: url(bild/hgGrafik_grau_menu.gif);  */
	/*background-image: url(bild/conqueror_papier_kachel.jpg); */
	padding: 0;
	padding-top: 200px; /* oben/unten und links/rechts sind jeweils gleich */
	padding-bottom: 2000px;
	text-align: center;
	margin: 0 0 0 10px;
	}
	#navigation li {
	display: block; /* alle Listenelemente untereinander anzeigen! */
	list-style-type: none; /* ohne Aufzählungspunkte */
	margin: 4px 0;
	line-height: 14px;
	width: 100px;
	}
	#navigation ul { 
	padding: 0;
	width: 100px;
	}
	
	#navigation a { 
	display: block;
	color: #333;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
	background-color: #d2c7aa;
	width: auto;
	padding: 4px 8px;
	border: 1px solid  #796958; 
	font-size: 11px;
	font-variant: small-caps;
	font-weight: normal;
	letter-spacing: 0;
	}
	
	#navigation a:hover,
	#navigation a:focus,
	#startseite #navi01 a,
	#angebot #navi02 a,
	#portfolio #navi03 a,
	#referenzen #navi04 a,
	#verguetung #navi05 a,
	#profil #navi06 a,
	#kontakt #navi07 a,
	#sitemap #navi07a a,
	#links #navi08 a,
	#impressum #navi09 a,
	#agb #navi10 a
	{
	color: #333;
	font-weight: bold;
	background-color: #FFC900;
	/* background-image: url(bild/button_background.gif); */
	border: 1px solid  #333; 
	}
	
	
#twitter a { 
	color: #FFC900; 
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
	
	font-variant: normal;
	letter-spacing: 0;
	}
#twitter a:hover, a:focus { 
	color: #fff; 
	background-color: #e3dfcf; 
	}
#twitter a:active { 
	color: #000; 
	background-color: #FFF;
	 }

#facebook {
	width: 226px;
	margin-top: 10px;
	padding: 2px;	
	}


#content {
	position: relative;
	width: 380px;
	padding: 0; 
	height: auto;
	/*clear: both;*/
	margin-top: 183px;
	margin-left: 10px;
	color: #333;
	line-height: 22px;
	font-size: 110%;
	/*background-color:#6666CC;*/
	}
	
#sek_menu { /* Gestalte das HTML-Element mit dem Namen sek_menu */
	position: relative;
	top: 10px;
	left: 0;
	width: 100px;
	padding-top: 0; /* oben/unten und links/rechts sind jeweils gleich */
	text-align: center;
	}
	#sek_menu li {
	display: block; /* alle Listenelemente untereinander anzeigen! */
	list-style-type: none; /* ohne Aufzählungspunkte */
	margin: 4px 0;
	line-height: 12px;
	}
	#sek_menu ul { 
	padding: 0;
	}
	#sek_menu a { 
	color: #666633;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
	background-color: #e2dbc9;
	padding: 2px 8px;
	border: 1px solid #999; 
	width: auto;
	font-size: 95%;
	font-variant: normal;
	font-weight: normal;
	letter-spacing: 0.1em;
	}
	#sek_menu a:hover,
	#sek_menu a:focus {
	color: #333;
	background-color: #FFC900;
	border: 1px solid #796958; 
	}

td {
	background-position: left top;
}

/* Das Kontaktformular */
form {
   	text-align: right;
   	background-color: #fff;
   	width: 380px; /* Breite des Formulars */ 
	height: auto;
   	padding: 6px; 
   	border: 5px solid #FFC900;
   	line-height: 1.5em;
}

/* Beschriftung auf eigener Zeile */
label { 
   display: inline; 
   cursor: pointer; 
   /*float: left; */
} 

input, 
textarea { 
	position: relative;
	/*float: right; */
   width: 20em;
   height: 1.5em;
   border: 1px solid #333;
   margin-bottom: 0.5em;
   margin-left: 0.2em;
   margin-right: 0.2em;
}

input#plz {
	width: 4em;
}

input#ort {
	width: 15em;
}

input#analyse, 
input#rueckruf {
	width: 20px;
}

textarea {
	height: 5em;
	width: 18em;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
}

input#absender:focus, 
#url:focus,
#telefon:focus,
#name:focus,
#vorname:focus,
#firma:focus,
#strasse:focus,
#plz:focus,
#ort:focus,
#mail:focus,
textarea:focus
 {
   background-color: #e9e3d5; 
}

input#submit, 
input#reset {
	width: auto;
	font-weight: bold;
	height: 3em;
	cursor: pointer; 
	border: 3px solid #FFC900;
	background-color: #fff;
}

input#submit:hover, 
input#reset:hover {
	border: 3px solid #999;
	background-color: #FFC900;
	font-weight: bold;
}