/* 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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

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: '';
	content: none;}
	
table {
	border-collapse: collapse;
	border-spacing: 0;}



/* Body & Container ----------------------------------------------------------------------/
--------------------------------------------------------------------------------------***/
body {
    background: #EDEDED;
    }

#container {
    position:relative;
    margin:0 auto;
    width:945px;
    background:white;
    }



/* Header-Bereich -----------------------------------------------------------------------/
--------------------------------------------------------------------------------------***/
#header {
    float:left;
    position:relative;
    height:190px;
    width:765px;
    margin: 5px 90px 10px 90px;
    background:white;
    }

/* Logo ------------------------------------------*/
.logo {
    position:absolute;
    top:0px;
    left:0px;
    float:left;
    }

/* Info-Mappe ------------------------------------*/
.infomappe a {
    position:absolute;
    top: 30px;
    right:0px;
    font-family: 'Scada', sans-serif;
    font-size:0.8em;
    text-decoration:none;
    color:#404040;
    }

.infomappe a:hover {
    position:absolute;
    top: 30px;
    right:0px;
    font-family: 'Scada', sans-serif;
    font-size:0.8em;
    text-decoration:underline;
    color:#9B601F; 
    }

/* Font Awesome ----------------------------------*/
span.fa-file-pdf-o {
    color:#404040;
    position:absolute;
    top:28px;
    right: 105px;
    }



/* Navigation ---------------------------------------------------------------------------/
--------------------------------------------------------------------------------------***/
/* Grundkonfiguration ----------------------------*/
#navigation {
    float:left;
    position:relative;
    height:45px;
    width:765px;
    margin:0 90px 45px 90px;
    background: #CECECE;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #EDEDED), color-stop(100%, #CECECE));
    background: -webkit-linear-gradient(top, #EDEDED 20%, #CECECE 100%);
    background: -o-linear-gradient(top, #EDEDED 20%, #CECECE 100%);
    background: -ms-linear-gradient(top, #EDEDED 20%, #CECECE 100%);
    background: linear-gradient(to bottom, #EDEDED 20%, #CECECE 100%);
    }

.sf-menu, .sf-menu * {
	margin-top: 0;
	padding: 0;
	list-style: none;
	}

.sf-menu {
	float: left;
    }

.sf-menu li {
    position: relative;
    }

.sf-menu ul {
	position: absolute;
	display: none;
	min-width: 11em;
	top: 102%;
	left: 0;
	z-index: 99;
	}
	
.sf-menu > li {
    float: left;
    }

.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
    display: block;
    }

.sf-menu a {
	display: block;
	position: relative;
	}
	
.sf-menu ul ul {
	top: 0;
	left: 100%;
	}

/* Breite der Menüpunkte -------------------------*/  
#navigation ul.sf-menu li.navi1 {
    width: 80px;
    margin-right:1px;
    }
    
#navigation ul.sf-menu li.navi2 {
    width: 95px;
    margin-right:1px;
    }

#navigation ul.sf-menu li.navi3 {
    width: 95px;
    margin-right:1px;
    }

#navigation ul.sf-menu li.navi4 {
    width: 172px;
    margin-right:1px;
    }

#navigation ul.sf-menu li.navi5 {
    width: 111px;
    margin-right:1px;
    }
    
#navigation ul.sf-menu li.navi6 {
    width: 105px;
    margin-right:1px;
    }

#navigation ul.sf-menu li.navi7 {
    width: 100px;
    }

/* Aussehen Menüpunkte ---------------------------*/  
.sf-menu li a {
    padding: 16px 0 16px 23px;
	text-decoration: none;
	font-family: 'Helvetica';
	font-size: 13px;
	font-weight:bold;
    background: #B27A3E;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #B27A3E), color-stop(100%, #9B601F));
    background: -webkit-linear-gradient(top, #B27A3E 0%, #9B601F 100%);
    background: -o-linear-gradient(top, #B27A3E 0%, #9B601F 100%);
    background: -ms-linear-gradient(top, #B27A3E 0%, #9B601F 100%);
    background: linear-gradient(to bottom, #B27A3E 0%, #9B601F 100%);
    color:white;
    }

/* Menüpunkte bei Hover --------------------------*/  
.sf-menu li a:hover,
.sf-menu li a.sfHover {
    background: #CECECE;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #EDEDED), color-stop(100%, #CECECE));
    background: -webkit-linear-gradient(top, #EDEDED 20%, #CECECE 100%);
    background: -o-linear-gradient(top, #EDEDED 20%, #CECECE 100%);
    background: -ms-linear-gradient(top, #EDEDED 20%, #CECECE 100%);
    background: linear-gradient(to bottom, #EDEDED 20%, #CECECE 100%);
    color:#9B601F;
    }

/* Aktive Menüpunkte -----------------------------*/  
.sf-menu li.active a {
    background: #CECECE;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #EDEDED), color-stop(100%, #CECECE));
    background: -webkit-linear-gradient(top, #EDEDED 20%, #CECECE 100%);
    background: -o-linear-gradient(top, #EDEDED 20%, #CECECE 100%);
    background: -ms-linear-gradient(top, #EDEDED 20%, #CECECE 100%);
    background: linear-gradient(to bottom, #EDEDED 20%, #CECECE 100%);
    color:#9B601F;
    }

/* Aussehen untere Menüpunkte --------------------*/  
.sf-menu ul li a {
    background: #B27A3E;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #B27A3E), color-stop(100%, #9B601F));
    background: -webkit-linear-gradient(top, #B27A3E 0%, #9B601F 100%);
    background: -o-linear-gradient(top, #B27A3E 0%, #9B601F 100%);
    background: -ms-linear-gradient(top, #B27A3E 0%, #9B601F 100%);
    background: linear-gradient(to bottom, #B27A3E 0%, #9B601F 100%);
    color:white;
    }

/* untere Menüpunkte bei Hover -------------------*/  
.sf-menu ul li a:hover,
.sf-menu ul li a.sfHover {
    background: #CECECE;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #EDEDED), color-stop(100%, #CECECE));
    background: -webkit-linear-gradient(top, #EDEDED 20%, #CECECE 100%);
    background: -o-linear-gradient(top, #EDEDED 20%, #CECECE 100%);
    background: -ms-linear-gradient(top, #EDEDED 20%, #CECECE 100%);
    background: linear-gradient(to bottom, #EDEDED 20%, #CECECE 100%);
    color:#9B601F;
    }

/* Aktive untere Menüpunkte ----------------------*/  
.sf-menu ul li.active a {
    background: #CECECE;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #EDEDED), color-stop(100%, #CECECE));
    background: -webkit-linear-gradient(top, #EDEDED 20%, #CECECE 100%);
    background: -o-linear-gradient(top, #EDEDED 20%, #CECECE 100%);
    background: -ms-linear-gradient(top, #EDEDED 20%, #CECECE 100%);
    background: linear-gradient(to bottom, #EDEDED 20%, #CECECE 100%);
    color:#9B601F;
    }

/* Pfeile für unteres Menü -----------------------*/
.sf-arrows .sf-with-ul:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1em;
	margin-top: -3px;
	border: 5px solid transparent;
	border-top-color: #EDEDED;
	}
	
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
	border-top-color: #9B601F;
	}

/* Content-Bereich ----------------------------------------------------------------------/
--------------------------------------------------------------------------------------***/
/* Allgemein -------------------------------------*/
#content {
    width:765px;
    margin:0 90px;
    background:white;
    padding-bottom:50px;
    }

p {
    font-family: 'Helvetica', sans-serif;
    font-size:1em;
    color: #343434;
    line-height:1.2em;
    text-align:justify;
    }
    
.bold {
    font-weight:bold;
    color:#343434;
    }

h1 {
    font-family: 'Helvetica', sans-serif;
    font-size: 1.1em;
    font-weight:bold;
    color:#9B601F;
    border-bottom:solid 1px #A4671E;
    width:765px;
    padding:20px 0;
    background:white;
    }

h2 {
    font-family: 'Helvetica', sans-serif;
    font-size: 1em;
    font-weight:bold;
    color:#9B601F;
    padding:20px 0;
    background:white;
    }
    
h3 {
    font-family: 'Helvetica', sans-serif;
    font-size: 1em;
    font-weight:bold;
    color:#9B601F;
    padding-top:20px;
    padding-bottom:7px;
    background:white;
    }

/* Einteilung Home-Seite ---------------------------------------------------------------*/
a.produkte {   
    text-decoration:none;
    font-family: 'Helvetica', sans-serif;
    font-size:1em;
    color: #404040;
    line-height:1.4em;
    }

a.produkte:hover {   
    list-style:none;
    font-family: 'Helvetica', sans-serif;
    font-size:1em;
    color: #9B601F;
    }
    
a.routelink {
    color: #9B601F;
    text-decoration:none;
}

a.routelink:hover {
    text-decoration:underline;
}
    
span.fa-external-link {
    color:#404040;
    font-size:0.8em;
    }
    
.picrechts {
    margin:0 0 0 155px;
    }

p.pictextlinks {
    float:left;
    font-family: 'Scada', sans-serif;
    position:absolute;
    margin-top:3px;
    font-size:14px;
    color: black;
    }
    
p.pictextrechts {
    float:right;
    position:absolute;
    right:342px;
    margin-top:3px;
    font-family: 'Scada', sans-serif;
    font-size:14px;
    color: black;
    }
    
/* Referenzen Spalten --------------------------------*/
.linkespalte {
    float:left;
    width:210px;
    height:auto;
    margin-top:20px;
    padding-bottom:20px;
    background:white;
    }

.mittlerespalte {
    float:overflow;
    width:230px;
    height:auto;
    margin-top:20px;
    margin-left:245px;
    padding-bottom:20px;
    background:white;
    }

.rechtespalte {
    float:right;
    position:absolute;
    right:90px;
    bottom:70px;
    width:254px;
    height:auto;
    padding-bottom:20px;
    background:white;
    }


/* Fonts --------------------------------------------------------------------------------/
--------------------------------------------------------------------------------------***/
.sitemapcontent {
    padding-top:20px;
    }
    
a.link {   
    list-style:none;
    font-family: 'Helvetica', sans-serif;
    font-size:1em;
    color: #404040;
    line-height:1.6em;
    }

a.link:hover {   
    list-style:none;
    font-family: 'Helvetica', sans-serif;
    font-size:1em;
    color: #9B601F;
    }
  
a.sublink {
    font-family: 'Helvetica', sans-serif;
    font-size:1em;
    color: #404040;
    line-height:1.5em;
    padding-left:20px;
    }

a.sublink:hover {   
    list-style:none;
    font-family: 'Helvetica', sans-serif;
    font-size:1em;
    color: #9B601F;
    line-height:1.5em;
    }
 
#überunsbilder {
    padding-top:20px;
    position:relative;
    }
    
.dani {
    position:absolute;
    top:20px;
    left:0px;
    height:180px;
    width: 120px;
    background:grey;
    }
    
.mike {
    position:absolute;
    top:20px;
    left:200px;
    height:180px;
    width: 120px;
    background:grey;
    }

.erika{
    position:absolute;
    top:20px;
    left:360px;
    height:180px;
    width: 120px;
    background:grey;
    }

.rocky{
    position:absolute;
    top:20px;
    left:460px;
    height:180px;
    width: 120px;
    background:grey;
    }


/* Footer-Bereich -----------------------------------------------------------------------/
--------------------------------------------------------------------------------------***/
#footer {
    float:left;
    position:relative;    
    height:80px;
    width:945px;
    padding-bottom:20px;
    margin-bottom:20px;
    background: #B27A3E;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #B27A3E), color-stop(100%, #9B601F));
    background: -webkit-linear-gradient(top, #B27A3E 0%, #9B601F 100%);
    background: -o-linear-gradient(top, #B27A3E 0%, #9B601F 100%);
    background: -ms-linear-gradient(top, #B27A3E 0%, #9B601F 100%);
    background: linear-gradient(to bottom, #B27A3E 0%, #9B601F 100%);
    }

/* linke Adresse im Footer -----------------------*/
.kontaktzeile {
    float:left;
    position:relative;
    padding-top:25px;
    margin-left:90px;
    
    }

p.text-kontaktzeile {
    font-family: 'Scada', sans-serif;
    font-size:0.7em;
    line-height:1.5em;
    color: #EDEDED;
    }
    
/* Footer Rechts simple design -------------------*/   
.impressumszeile {
    float:right;
    position:relative;
    padding-top:40px;    
    margin-right:90px;
    line-height:1.1em;
    }

.text-impressumszeile {
    font-family: 'Scada', sans-serif;
    font-size:0.7em;
    text-decoration:none;
    color: #EDEDED;
    }
    
.text-impressumszeile:hover {
    font-family: 'Scada', sans-serif;
    font-size:0.7em;
    text-decoration:underline;
    color: white;
    }

/* Footer Rechts Sitemap Menü --------------------*/   
.sitemap li {
     display:inline;
    list-style:none;
    }

.sitemap li a {
    font-family: 'Scada', sans-serif;
    font-size:0.7em;
    text-decoration:none;
    color:#EDEDED;
    }
    
.sitemap li a:hover {
    font-family: 'Scada', sans-serif;
    font-size:0.7em;
    text-decoration:underline;
    color:white;
    }
    
.sitemap li.selected a {
    font-family: 'Scada', sans-serif;
    font-size:0.7em;
    font-weight:bold;
    text-decoration:underline;
    color:white;
    }

.strich {
    font-size:0.8em;
    color:#EDEDED;
    }