body {
	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans serif; font-size: 83%;
	background: url("../gfx/design/bg-body.gif") repeat-x #ADDEF1; 
	text-align: center;
}

/* Reset */
html, body, div, ol, ul, li, p, a, h1, h2, h3, h4, form {margin: 0; padding: 0;}

br.clearit {clear: both;}  /* makes my life easier :-) */

/* Positionierung des Textes ausserhalb des Sichtbaren */
#header span, #header-img span, #nav span  {display: block; position: absolute; top: -3000em; left: -3000em;} 

/* umgebender Container */
#container {
	width: 821px; 
	margin: 0 auto 0 auto;
	text-align: left;
	background: url("../gfx/design/bg-content.gif") center top repeat-y; 
}

/* ============================== Kopf-Bereich =========================== */

#header {
	width: 100%; height: 183px;
	background: url("../gfx/design/bg-header-base.gif"); 
	text-align: left;
}

a.logo {
	display: block; float: left; 
	width: 626px; height: 183px; 
	margin: 0;
	font-size: 0; line-height: 0px; 
	background: url("../gfx/design/logo.gif") no-repeat;
}

/* ============================== Positionsanzeige  ============================= */

#content #show-position {
	font-size: 90%;
	margin: 6px 10px 0 0;
	color: #999999;
	}

#content #show-position a, #content #show-position a:visited  {color: #656565; text-decoration: none;}
#content #show-position a:hover, #content #show-position a:active, #content #show-position a:focus {color: #000000;}

/* ============================== Content-Bereich =========================== */


/* :::::: umgebender Container :::::: */
#content {
	width: 500px; float: left; 
	margin: 0 0 20px 85px;
	padding-top: 20px;
	color: #656565; font-family: Verdana, "Lucida Grande", Arial, sans-serif; line-height: 170%; font-size: 90%;
	}
/* ============================== Navigation ================================== */

#nav {
	float: left;
	margin: 70px 0 15px 29px;
	text-align: right; 
	display: inline; /* IE fix */
}

#nav ul   {list-style: none;}
#nav li { list-style: none;}

html + body #nav ul li {display: inline;}

#nav li a, #nav li a:visited {
	display: block; 
	width: 157px; height: 31px;
	margin-bottom: 1px;
	color: #3A73A4; font-size: 100%; text-decoration: none; line-height: 31px;
	background: url("../gfx/design/n-n-bg.gif") no-repeat;
}

#nav li a:active, #nav li a:hover, #nav li a:focus {
	width: 157px; height: 31px;
	margin-bottom: 1px;
	color: #FFF; line-height: 31px;
	background: url("../gfx/design/n-n-bg.gif") -157px 0 no-repeat;
}

/* erster Punkt Startseite */
#nav #n-startseite a, #nav #n-startseite a:visited {
	background: url("../gfx/design/n-first-bg.gif") no-repeat;
}
#nav #n-startseite  a:active, #nav #n-startseite  a:hover, #nav #n-startseite  a:focus {
	background: url("../gfx/design/n-first-bg.gif") -157px 0 no-repeat;
}
/* aktiver erster Menü-Punkt */
#startseite #nav #n-startseite a, #startseite #nav #n-startseite a:visited {
	color: #3A73A4; 
	background: url("../gfx/design/n-first-bg.gif") -314px 0 no-repeat;
}

/* Profil */
#nav #n-profil a, #nav #n-profil a:visited {
	background: url("../gfx/design/n-n-bg.gif") no-repeat;
}
#nav #n-profil  a:active, #nav #n-profil  a:hover, #nav #n-profil  a:focus {
	background: url("../gfx/design/n-n-bg.gif") -157px 0 no-repeat;
}
/* aktiv */
#profil #nav #n-profil a, #profil #nav #n-profil a:visited {
	color: #3A73A4; 
	background: url("../gfx/design/n-n-bg.gif") -314px 0 no-repeat;
}

/* Leistungen */
#nav #n-leistungen a, #nav #n-leistungen a:visited {
	background: url("../gfx/design/n-n-bg.gif") no-repeat;
}
#nav #n-leistungen  a:active, #nav #n-leistungen  a:hover, #nav #n-leistungen  a:focus {
	background: url("../gfx/design/n-n-bg.gif") -157px 0 no-repeat;
}
/* aktiv */
#leistungen #nav #n-leistungen a, #leistungen #nav #n-leistungen a:visited {
	color: #3A73A4; 
	background: url("../gfx/design/n-n-bg.gif") -314px 0 no-repeat;
}

/* Projekte */
#nav #n-projekte a, #nav #n-projekte a:visited {
	background: url("../gfx/design/n-n-bg.gif") no-repeat;
}
#nav #n-projekte  a:active, #nav #n-projekte  a:hover, #nav #n-projekte  a:focus {
	background: url("../gfx/design/n-n-bg.gif") -157px 0 no-repeat;
}
/* aktiv */
#projekte #nav #n-projekte a, #projekte #nav #n-projekte a:visited {
	color: #3A73A4; 
	background: url("../gfx/design/n-n-bg.gif") -314px 0 no-repeat;
}

/* Arbeitsbeispiele */
#nav #n-arbeitsbeispiele a, #nav #n-arbeitsbeispiele a:visited {
	background: url("../gfx/design/n-n-bg.gif") no-repeat;
}
#nav #n-arbeitsbeispiele  a:active, #nav #n-arbeitsbeispiele  a:hover, #nav #n-arbeitsbeispiele  a:focus {
	background: url("../gfx/design/n-n-bg.gif") -157px 0 no-repeat;
}
/* aktiv */
#arbeitsbeispiele #nav #n-arbeitsbeispiele a, #arbeitsbeispiele #nav #n-arbeitsbeispiele a:visited {
	color: #3A73A4; 
	background: url("../gfx/design/n-n-bg.gif") -314px 0 no-repeat;
}

/* letzter Punkt (Kontakt) */
#nav #n-kontakt a,#nav #n-kontakt a:visited {
	background: url("../gfx/design/n-last-bg.gif") no-repeat;
}
#nav #n-kontakt  a:active, #nav #n-kontakt  a:hover, #nav #n-kontakt  a:focus {
	background: url("../gfx/design/n-last-bg.gif") -157px 0 no-repeat;
}
/* aktiver letzter Menü-Punkt */
#kontakt #nav #n-kontakt a, #kontakt #nav #n-kontakt a:visited {
	color: #3A73A4; 
	background: url("../gfx/design/n-last-bg.gif") -314px 0 no-repeat;
}

/* ============================== Footer-Bereich ================== */

#content a.toplink, #content a.toplink:visited {background: url("../gfx/design/icon-toplink.gif") left center no-repeat; padding-left: 13px; border: none; text-decoration: none; color: #656565;}
#content a.toplink:hover, #content a.toplink:active, #content a.toplink:focus {background: url("../gfx/design/icon-toplink.gif") left center no-repeat; border: none; color: #000;}
/* Hack IE 5.0 verhindert einen Bug bezüglich style = padding + bg + link (verrutschender Content im IE 5.0) */
html + body #content a.toplink , html + body #content a.toplink:visited {display: block;}


#footer {
	position: relative; 
	width: 100%; height: 61px; 
	font-size: 70%; color: #656565;
	background: url("../gfx/design/bg-footer.gif") no-repeat;
}  

/* Telefonnummer + Icon */
#footer span {
	display: block; 
	margin: 18px 0 0 40px;
	float: left;
	background: url("../gfx/design/icon-telefon.gif") left center no-repeat; padding-left: 22px;
	display: inline;
}

/* Impressum-Link */
#footer a {
	display: block; 
	float: right;
	padding: 18px 45px 0 0;
}

#footer a, #footer a:visited  {color: #656565; text-decoration: none;}
#footer a:hover, #footer a:active, #footer a:focus {color: #000000;}

#footer p { padding: 0 15px 0 19px; margin: 0; color: #E3E9F5; line-height: 3.3em; }


/* ============================== Schriften  ============================= */


/* Links */
#content a			{color: #3A73A4; text-decoration: underline;}
#content a:visited 	{color: #4B7295; background: none;}
#contenta:active, #content a:hover, #content a:focus {color: #A0B503;}

/* :::::: Überschriften h1 - h3 :::::: */

#content h1, #ruf-content h2, #ruf-content h3 {font-family: "Lucida Grande", Arial, Helvetica, Verdana, Tahoma, sans-serif;}

h1 {
	padding: 5px 0 6px 0;
	font-size: 170%; line-height: 150%; color: #3871A6;
	font-weight: normal;
	}
	
h2 {
	padding: 5px 0 3px 0;
	margin: 7px 0 0 0;
	font-size: 125%;
	color: #656565;
	}
	
h3 {
	padding: 5px 0 0 0;
	font-size: 110%;
	line-height: 110%;
	color: #BED41B;
	}

p {
	margin: 3px 0 10px 0;
}
	
/* :::::: Listen :::::: */
			
#content ul {margin: 10px 0 15px 30px;}
#content ul li {
			background: none;
			list-style-type: circle; 
			line-height: 160%; 
			padding: 2px 0 2px 2px; 
			}
			
#content ol {margin: 10px 0 15px 25px; padding: 0 0 0 5px;}
#content ol li {
			background: none;
			list-style-type: circle; 
			line-height: 160%; 
			padding: 2px 0 2px 2px; 
			list-style-type: decimal;
			}
			
#content ol li {margin-left: 0px;}
			
#content .ul-img	{ 	
	list-style-image: url("../gfx/design/icon-bullet-01.gif");
	margin: 12px 5px 26px 10px; padding: 2px 0 2px 17px; 
	}

#content .ul-img li {margin-bottom: 5px; background-image: none;}



/* ======= Bilder  ======== */

#content img	{font-family: Arial, Verdana, Helvetica, Sans-Serif; border: 0px;}
.bild-links {float: left; margin: 5px 7px 5px 0;}
.bild-rechts {float: right; margin: 5px 0 6px 7px;}
.bild-allein {clear: both;}

.bild-links-rand {float: left; margin: 5px 7px 5px 0; border: 1px solid #656565;}
.bild-rechts-rand {float: right; margin: 5px 0 6px 7px; border: 1px solid #656565;}
.bild-allein-rand {clear: both; border: 1px solid #656565; }


/* webEdition interne Styles habe ich ausgelagert, damit sie nicht bei der Auswahl eines Linkstyles erscheinen */