@charset "utf-8";
/* CSS Document */

/* *******************************
	Website graugans-Design.de
	Vers. 4.0
	August 2010
	Autor: graugans-Design
******************************* */

/* *******************************
	Inhalt und Struktur:
	1. Allg. Formatierungen und 
	   Klassen 
	2. body   
	3. wrapper_main
	4. header
	5. navi Ist ausgelagert wg. widget
	6. content
	7. content_sub
	8.footerstick und footer
******************************* */

/* *******************************
	1. Allg. Formatierungen und
	   Klassen
******************************* */

* {
	margin: 0;
	padding: 0;	
}

html {
	height:100%; /* Voraussetzung für footerstick */	
}

/* Text */
body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: .8em;
	line-height: 1.6em;
	color: #313639;
}

/* Elemente, die nur bei reinem HTML angezeigt werden sollen */
.unsichtbar {
	visibility: hidden;
}

h3 {
	font-weight: normal;
	font-size: 1.8em;
	margin-bottom: 1em;	
}

h4 {
	margin-bottom: 1em;
}

h5 {
	font-size:1.3em;
	line-height:160%;
	font-weight: normal;	
}

a {
	color: #313639;	/* Dunkelgrau */
}

/* links auf der Impressum-Seite */
#impressum #content a {
	color: #5fb881;	/* Hellgrün */
}

/* links auf der Impressum-Seite */
#impressum #content a:hover, 
#impressum #content a:focus {
	color: #e77b22; /* Orange */
}

p {
	margin-bottom: .8em;	
}

/* floats beenden */
hr {
	visibility: hidden;
	clear: both;
	margin: 0;
	padding: 0;
	height: .1px;
	border: none;
	color: white;
}

.fett {
	font-weight: bold;	
}

.klein {
	font-size: 80%;	
}

*+ html .klein, * html klein {
	font-size: 10px;	
}

/* *******************************
	2. body
******************************* */

body {
	height:100%; /* Voraussetzung für footerstick */	
	background: url(../_img/_grafElementeSite/body_bg.gif);
}

/* border oben im Viewport */
#index {
	border-top: 6px solid #e77b22;	/* Startseite */
}

#referenzen {
	border-top: 6px solid #eace47;	/* Referenzen */
}

#ueber_uns {
	border-top: 6px solid #248869;	/* Über uns */
}

#kontakt, #danke {
	border-top: 6px solid #72a7e3;	/* Kontakt */
}

#impressum {
	border-top: 6px solid #5fb881;	/* Impressum */
}

/* *******************************
	3. wrapper_main und wrapper
******************************* */

#wrapper_main {
	position: relative;
	min-height: 100%; /* Voraussetzung für footerstick */
	width: 1010px;
	margin: 0 auto;
}

* html #nonFooter {
	height: 100%; /* Voraussetzung für footerstick IE6*/
}

/* Das padding von wrapper wird gebraucht, falls der Viewport kleiner
   als der Inhalt wird, damit der footer nicht über den
   Inhalt rutscht. Padding mind. = Höhe footer. */
#wrapper {
	padding-bottom:5em; /* 4em + Polster */	
}

/* *******************************
	4. header
******************************* */

#header {
	background: url(../_img/_grafElementeSite/header_bg.jpg) no-repeat;
	width:950px;
	height:	229px;
	position:relative; /* als Fixpunkt für die Navigation */
	margin-left:60px; /* damit content linken Rand haben kann */
}

/* *******************************
	5. navi
	   Ist ausgelagert wg. widget
******************************* */

/* *******************************
	6. content
******************************* */

#content {
	background: white;
}

/* Balken links Startseite (Orange) */
#index #content {
	border-left: 60px solid #e77b22;	
	height: 320px;
}

/* Balken links Referenzen (Gelb) */
#referenzen #content {
	border-left: 60px solid #eace47;
	padding: 45px;	
	padding-bottom: 30px;
}

/* Balken links über uns (Blau) */
#ueber_uns #content {
	border-left: 60px solid #72a7e3;
	padding: 45px;	
	padding-bottom: 30px;
}

/* Balken links Kontakt (Hellgrün) */
#kontakt #content {
	border-left: 60px solid #72a7e3;
	padding: 45px 350px 40px 45px; /* viel padding rechts wg. HG-Bild */
	background: url(../_img/_grafElementeSite/foto_kontaktseite.jpg) no-repeat top right; 
	background-color: white;
	height: 447px;
}

/* Balken links Impressum (Dunkelgrün) */
#impressum #content {
	border-left: 60px solid #5fb881;
	padding: 45px 400px 40px 45px; /* viel padding rechts wg. HG-Bild */
	background: url(../_img/_grafElementeSite/foto_impressum.jpg) no-repeat top right;	
	background-color: white;
}

#danke #content {
	border-left: 60px solid #72a7e3;
	padding: 45px 350px 40px 45px; /* viel padding rechts wg. HG-Bild */
	background: url(../_img/_grafElementeSite/foto_kontaktseite.jpg) no-repeat top right; 
	background-color: white;
	height: 10em;	
}

/* "...zurück zur Startseite"-Link Danke Seite */
.link_start {
	margin-top:30px;
	display: block;
	width:13em;
	padding:7px 15px;
	background:#72a7e3;
	color: white;
	text-decoration: none;
}

.link_start:hover,
.link_start:focus {
	background: #e77b22;
}

/* "Unsere Referenzen"-Link im Fliesstext Startseite */
.link_ref {
	margin-top:30px;
	display: block;
	width:10em;
	padding:7px 15px;
	background:#e77b22;
	color: white;
	text-decoration: none;
}

.link_ref:hover,
.link_ref:focus {
	background: #eace47;
}

/* *******************************
	7. content_sub
******************************* */

#content_sub {
	position:relative;
	margin-left: 60px;	
	border: solid 1px #2a2f32;
	background-color: #393f43;	
}

/* 	ein abs. pos. DIV um den Rahmen, den die Knickecke freilässt 
	unten rechts im content_sub zu überdecken */
#rahmen_weg {
	position: absolute;
	/*z-index: 1000;*/
	width: 51px;
	height: 52px;
	bottom: -1px;
	right: -1px;
	background:url(../_img/_grafElementeSite/knickEcke.gif) no-repeat bottom right;		
}

/* *******************************
	8. footerstick und footer
	
	footerstick klebt am unteren 
	Rand des Viewport
******************************* */

#footerstick {
	background-color:black;
	height:4em;
	position: relative;
	margin-top: -4em;
	line-height:4em;
	text-align:center;
} 

address {
	color:#40474d;
	font-style:normal;
	font-size:90%;
}

address a {
	color:#40474d; /* E-Mail-link in gleicher Farbe wie Text */
}

address a:hover,
address a:focus,
address a:active {
	color:#565f66; /* E-Mail-link hover */
}