@charset "utf-8";
/* 
	Stylesheet für heinelt-beschriftungen.de Webauftritt
	
	Mit viel liebe zum Detail in der Dokumentation für den Lernfaktor,
	liebevoll erstellt durch Raphael Laschke.
	Fragen und Aufträge an: raphael@raphael-laschke.de (nur kostenlos bzw. Preisvermindert für David Utecht :)) 
*/


/****** CSS Reset ******/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
*{padding:0;margin:0;outline:none;text-decoration:none;}
/****** End CSS-Reset ******/

/****** Heinelt Webseite ******/


body {						/* Schrifteinstellungen Global und Hintergrundbild  */
	background: url(../img/Hintergrund.png);	
	font-family: 'PT Sans', sans-serif;
	color:#000;
}

#page { 					/* Hauptcontainer */
	width:960px;			/* Vorgegebene Breite */
	margin:35px auto; 		/* 35px nach unten verschieben und zentrieren */
	border:1px solid #000;  /* Schwarzer Rand :/ */
	background:#fff;		/* Hintergrundfarbe */
	min-height:600px;		/* eine Mindesthöhe festlegen*/
	overflow:hidden;
}



/* Navigation */
#nav {
	width:100%;				/* die 960px vom Hauptcontainer */
	height:130px; 			/* Die Höhe des Logos */ 
	margin:10px 0 40px 0; 	/* Abstand von der Navigation zum Inhalt */
	position:relative;		/* Relativ damit stueckBlau absolute davon positioniert werden kann */
}
#logo {
	/* 
	Die Linkliste darf eigentlich nicht das Logo überdecken!! 
	fals erwünscht, die beiden einträge löschen und ggf. stueckBlau nach wunsch positionieren 
	*/
	z-index:999;
	position:relative;
}
#stueckBlau {				
	height:45px;			/* das hier ist ein kleiner Blauer Block zwischen Logo und Liste */
	width: 20px;			/* Selbsterklärend */
	display:block;			/* Bla */
	position:relative;		/* Blub */
	margin-top:-56px;		/* ..positionieren halt ne:) */
	left:344px;				/* Selbsterklärend */
	background:#26358A;		/* FARBE */
	z-index:1;				/* HINTER DAS LOGO */	
}
#nav ul {	
	width:598px;			/* restliche Breite für Leistung, Kontakt, Impressum */
	height:45px; 			/* Höhe der Linkliste bzw. Links */
	float:right;			/* auf die rechte Seite verschieben */
	position:relative;		/* relativ von der Navigation positionieren */
	top:76px;				/* 130 - 45 = (85 theoretisch) die Linkliste auf höhe des Logos positionieren... muss nach augenmaß */
	background:#26358A;		/* das Blau der Linkliste bzw. vom Logo */
	left:2px;
}
#nav ul li {	
	float:left;				/* Listenpunkte horizonta/Nebeneinander fließen lassen */
}
#nav ul li a {
	padding:10px 0;			/* 10px Abstand nach oben und unten = 10px + Font-size 25px + 10px = 45px */                                                                   
	width:199px;			/* 600px breite auf 3 (links) aufteilen */
	text-align:center;		/* Text zentrieren */
	display:inline-block;	/* Zustand um die Breite angeben zu können */
	color:#fff;				/* Textfarbe */
	font-size:25px;			/* Textgröße */
}
#nav ul li a:hover, 		/* Zeige dem Benutzer Interaktion !!!!!  */
.activ { 					/* Und zeig ihm, wo er sich gerade befindet !!!!! */
	background:#F2E519;		/* Z.b. das Gelb vom Logo..Hintergrund */
	color:#26358A!important;/* Textfarbe Logo-Blau */
}
/* Ende Navigation */



/* (einheitliche) Schriftgröße für den Inhalt wird mit einer Klasse,ID oder einfach z.B. section p{font-size:30px} überschrieben */
section {font-size:16px;} 



/****** Leistungen ******/

/* Slideshow zu aufwendig zum Dokumentieren..sry, Namen, Farben und Positionen sind selbsterklärend und intuitiv */
#slideshowWrapper{
	position:relative;
	left:10px;
	width:330px;
	display:inline-block;
	float: left;
	margin: 0 35px 30px 0;
}
#fssPrev{position:absolute;top:110px;left:0;background: url(../js/neue_arrows.png) no-repeat 8px/50px  ;width:33px;height:33px;text-indent:-999999px;opacity:0;-webkit-opacity:0;transition:opacity 250ms linear;-webkit-transition:opacity 250ms linear;}
#fssNext{position:absolute;top:110px;left:305px;background: url(../js/neue_arrows.png) no-repeat -25px/50px ;width:33px;height:33px;text-indent:-999999px;opacity:0;-webkit-opacity:0;transition:opacity 350ms linear 50ms;-webkit-transition:opacity 350ms linear 50ms;}
#slideshowWrapper:hover > #fssPrev, #slideshowWrapper:hover > #fssNext, #slideshowWrapper:hover > #fssPlayPause {opacity:0.6;-webkit-opacity:0.6;}
#fssPlayPause{position:absolute;bottom:60px;right:5px;background:rgba(38, 53, 138,0.6);padding:4px 0 5px 0;border-radius:5px;width:60px;text-align:center;display:block;color:#fff;text-decoration:none;font-size:15px;opacity:0;-webkit-opacity:0;transition:opacity 350ms linear 50ms;-webkit-transition:opacity 350ms linear 50ms;}
#slideshow{list-style:none;padding:2px;margin:auto;width:333px;height:249px;overflow:hidden;}
#slideshow p{text-align:center;}
#fssList{list-style:none;width:332px;margin:auto;padding:5px ;text-align:center;}
#fssList li{display:inline;padding-right:0px;margin-right:5px;}
#fssList li a{color:#999;text-decoration:none;font-size:14px;}
#fssList li.fssActive a{font-weight:bold;color:rgb(38, 53, 138);}
#top{background:#3b5998;width:100%;height:40px;margin-bottom:20px;}
#top h1{color:#fff;font-weight:normal;font-size:18px;padding:7px 0 0 15px}
#top h1 span{font-size:12px;}
#top h1 a{text-decoration:underline;color:#fff;}
#top h1 a:hover{text-decoration:none;}
small a{color:#000;}
/* Ende Slideshow */

/* Leistungs-Aufzählung (hat die gleiche Position wie Kontaktdaten also CSS-ID zusammen nutzen mit einen , ) */
#auflistungen {				/* in einen Container packen und nach der Slideshow anordnen */
	float:left;				/* Horizontal anordnen */
margin: 0 0 20px 10px;		/* Abstand zum Boden und Slideshow (links und unten) */
}
#auflistungen ul {margin:0 0 20px 0; list-style-type: disc;} /* Listen mit einen Abstand untereinander von 20px */
#auflistungen ul li {margin:5px 0;}   /* Listenpunkten-Abstand 5px nach oben + unten */
#auflistungen ul li:first-child {margin-top:0;} /* erster Listenpunkten-Abstand nach oben entfernen */
/****** Ende Leistungen ******/



/****** Kontakt ******/
#kontakt {					/* in einen Container packen und nach der Google Map anordnen */
	float:left;				/* Horizontal anordnen */
margin: 0 0 20px -10px;		/* Abstand zum Boden und Map (links und unten) */
}
#g_map {
	position:relative;
	left:10px;
	margin: 0 35px 30px 0;
	float:left;
}
.abschnitt {
	margin:0 0 20px 0;
	display:block;
	line-height:120%;
}
#kontaktnummern tr td {
	padding-right:5px;
}
/****** Ende Kontakt ******/




/****** Impressum ******/
#impressum {
	padding:0 20px 20px 360px;
}
/****** Ende Impressum ******/

/* Globale Klassen */
.bold {font-weight:700; letter-spacing:1px;}