/* ================================================================
	Stylesheet for WATAIR - Swiss plumbing Corporation and Service. 
	Stand: CSS Aufbau-Grundgerüst
	Datei: watair-screen.css
	Datum: 11.09.07
	Autor: Frank Vondruska

	Aufbau: 1. Kalibrierung und allgemeine Styles
			2. Styles für Layoutbereich
			3. Sonstige Styles
	============================================================ */



/* =============================================================
	1. Kalibrierung und allgemeine Styles
	============================================================ */
	/* Kalibrierung der wichtigsten Abstände */
	* {padding: 0; margin: 0;}
	/* Abstand nach unten */
	h2, p, ul, ol { margin-bottom: 1em; }
	ul ul { margin-bottom: 0; }
	/* Abstand von links */
	li { margin-left: 1em; }
	html { height: 101%; }
	body {
		color: black;
		background-color: #b6e7f8;
		background: url(../img/hg/stripes_01.gif);
		font-family: Verdana, Arial, Helvetica, san-serif;
		font-size: small;
	}
	
	h1 { 
		color: #00a5e4;
		font-size: 150%
	}
	h2 { font-size: 130%}

	address {
		text-align: center;
		font-size: 80%;
		font-style: normal;
		letter-spacing: 2px;
		line-height: 1.5em;
	}
	/* Hyperlinks allgemein */
	a { text-decoration: none; outline: none; } /* Unterstreichung und Umrisslinie entfernt */
	
	a:link { color: #00a5e4; }
	a:visited { color: #00a5e4; }
	
	a:hover, 
	a:focus {
		border-bottom: 1px solid #00a5e4;
	}
	
	a:active {
		color: black;
		background-color: #B6E7F8;
	}
	#logo {
		color: black;
		position: absolute;
		top: 65px;
		left: 20px;
	}
	#vb-b {
		position: relative;
		background-color: transparent;
	}
		#image {
		color: black;
		position: relative;
		left: 0
	}
	.bildlinks {
		position: absolute;
		bottom: 0;
		left: 0;
		}
	.portrait { /* Die Fotos von Urs Und Joerg. Sehe Site: kompetenz.html */
		float: left;
		background-color: #00a5e4;
		padding: 1px;
		margin: 0 20px 40% 0;
		border: 5px solid #B6E7F8;
	}
	.clearing { clear:both; }
		
	.address {
		font-size: 80%;
		font-style: normal;
		letter-spacing: 2px;
		line-height: 1.5em;
	}
	/* =============================================================
	2. Styles für Layoutbereich
	============================================================ */

	#wrapper {
		color: black;
		background-color: white;
		width: 800px; /* Breite des Inhaltsbereiches */
		margin: 0 auto;
	}
	#kopfbereich {
		color: black;
		position: relative;
		background: white;
		padding: 60px 20px 40px 20px;
	}
		#kopfbereich p {
			position: absolute;
			top: 80px;
			right: 26px;
		}
	#navibereich { 
	position: relative;
		text-align: right; /* rechtsbündig */
		color: black;
		background-color: white;
		font-size: 78%;
		padding: 4px 0px 4px 0px;
		border-top: 3px solid #00a5e4;
		margin: 0px 20px 0px 216px;
}

	#navibereich ul { margin-bottom: 0; }
	#navibereich li {
		display: inline; /* li nebeneinander anzeigen */
		list-style-type: none; /* ohne Aufzählungspunkte */	
		margin: 0;
	}
	#navibereich a { 
		color: black;
		background-color: white;
		padding:  4px 8px 4px 8px;
	}
	#navibereich a:hover,
	#navibereich a:focus,
	#startseite #navi01 a,
	#kontaktseite #navi02 a {
		color: black;
		background-color: #b6e7f8;
	}
	#navibereich a:active {
		color: black;
		background-color: #00a5e4;
	}
	#textbereich  {
		background: url(../img/vb/wellen2.gif) repeat-y;
		position: relative;
		padding: 100px 30px 0 0;
	}
		#textbereich2  {
			position: relative;
			padding: 0 30px 80px 330px;
		}
	#fussbereich {
		background-color: transparent;
		height: 86px;
		width: 800px;
		margin: 0 auto;
	}
	#referenzliste {
		font-size: 78%;
		color: black;
		background-color: white;
		width: 450px;
	}
	/* =============================================================
	3. Sonstige Styles
	============================================================ */

ul li { list-style-type: square; }
/* Verschachtelt Liste ohne Abstand */

/* Das Kontaktformula */
	form {
		background-color: #e5f6fc;
		width: 400px; /*breite des Formulas */
		padding: 20px;
		border: 1px solid #00a5e4;
	}
	label {
		/*Beschriftung auf eigener Zeile */
		display: block;
		cursor: pointer; /* Mauszeiger wird zur Hand */
	}
	input#absender, 
	textarea {
		width: 300px;
		border: 1px solid #00a5e4;
		margin-bottom: 1em;
	}
	textarea {
		height: 7em;
	}
	input#absender:focus,
	textarea:focus {
		background-color: #d9d9d9;
	}
/* =============================================================
	ENDE DES STYLESHEETS
	============================================================ */