﻿
/* Wrapper */

body {
	margin-top: 30px;
	margin-bottom: 60px;
	background-image: url(./images/_background.png);
}
#wrapper_index {
	margin-left: auto;
	margin-right: auto;
	width: 768px;
	height: 1359px;
	background-color: #FFFFFF;
}	
#wrapper_ueberuns {
	margin-left: auto;
	margin-right: auto;
	width: 768px;
	height: 2302px;
	background-color: #FFFFFF;
}
#wrapper_produkte {
	margin-left: auto;
	margin-right: auto;
	width: 768px;
	height: 3106px;
	background-color: #FFFFFF;
}
#wrapper_emig {
	margin-left: auto;
	margin-right: auto;
	width: 768px;
	height: 1009px;
	background-color: #FFFFFF;
}
#wrapper_kontakt {
	margin-left: auto;
	margin-right: auto;
	width: 768px;
	height: 1009px;
	background-color: #FFFFFF;
}
#wrapper_impressum {
	margin-left: auto;
	margin-right: auto;
	width: 768px;
	height: 794px;
	background-color: #FFFFFF;
}
#wrapper_datenschutz {
	margin-left: auto;
	margin-right: auto;
	width: 768px;
	height: 8682px;
	background-color: #FFFFFF;
}
.shadow {
	-webkit-box-shadow: 0px 0px 5px 0px #000000;
	-moz-box-shadow: 0px 0px 5px 0px #000000;
	box-shadow: 0px 0px 5px 0px #000000;
}





/* fixe Elemente */

#header {
	float: left;
}

#navi {
	width: 488px;
	height: 86px;
	background-image: url(./images/_navi.png);
	float: left;
}
#navi ul {
	margin: 0px;
	padding-top: 36px;
	padding-left: 70px;
}
#navi ul li {
	list-style-type: none;
}
#navi ul li a {
	width: 100px;
	height: 30px;
	display: block;
	float: left;
	font-size: 16px;
	font-family: 'exomedium', Arial;
	font-weight: normal;
	color: #a0a0a0;
	text-decoration: none;
}
#navi ul li a:hover {
	color: #4d4d4d;
}

#navi ul li a:focus {
  outline: none;
  color: #4d4d4d;
}


#footer {
	width: 644px;
	height: 46px;
	float: left;
	background-image: url(./images/_footer.png);
	text-decoration: none;
	color: #a0a0a0;
	font-family: 'exolight', Arial;
	font-weight: normal;
	font-size: 16px;
	padding-top: 40px;
	padding-left: 62px;
	padding-right: 62px;
}
#footer a {
	color: #a0a0a0;
	text-decoration:none;
}
#footer a:hover {
	color: #FFFFFF;
}





/* index */


/* ------------------------------------------------------Slider------------------------------------------------------- */
	
.sliderElements,
.sliderElements figure,
.sliderControls {
    margin: 0;
}

/* Clearfix für die Liste */
.sliderElements:after {
    content: ".";
    display: block;
    height: .1px;
    clear: both;
    visibility: hidden;
    font-size: 0;
    overflow: hidden;
}

.cssSlider {
	/*position: relative;*/
	float: left;
	height: 350px;
	width: 768px;
	overflow: hidden;
}

.sliderElements {
	list-style: none;
	/*list-style-type: none;
	text-decoration: none;*/
	position: relative;
	left: 0;
	width: 4608px;   /*3072px;  Summe der Einzelbreiten der Slides */
    margin-bottom: .8em;
    -webkit-transition: left .8s ease-in-out;
    -moz-transition: left .8s ease-in-out;
    -o-transition: left .8s ease-in-out;
    transition: left .8s ease-in-out;
}

 
.sliderElements > li {
	/*list-style: none;
	list-style-type: none;
	text-decoration: none;*/
    float: left;
    width: 768px;    /*768px;  100 durch Anzahl der Slides */
	position: relative;
	left: -40;
	/*left: -40px;*/
}
 

#slide02:checked ~ .sliderElements {
    left: -768px;
}
#slide03:checked ~ .sliderElements {
    left: -1536px;
}
#slide04:checked ~ .sliderElements {
    left: -2304px;
}
#slide05:checked ~ .sliderElements {
    left: -3072px;
}
#slide06:checked ~ .sliderElements {
    left: -3840px;
}


 
/* inputs aus dem Blickfeld schieben */
.cssSlider input {
    position: absolute;
    left: -99999px;
}
 
/* mittige Ausrichtung der Controls - funktioniert im Zusammenspiel mit inline-block */
.sliderControls {
    text-align: center;
}
 
/* Controls nebeneinander bringen */
.sliderControls li {
    display: inline-block;
}
 
/* Controls auf einheitliche Maße bringen und die Ecken abrunden */
.sliderControls label {
    width: 10px;
    height: 10px;
    line-height: 35px;
	margin-left: 6px;
	margin-right: 6px;
    text-align: center;
    border-radius: 50%;
    display: block;
    cursor: pointer;
    background: #004ebc;
    color: #FFFFFF;
	font-size: 1px;
}
 
/* Attributselektor und indirekter Nachfahrkombinator zum ansteuern der labels */
.sliderControls label:hover,
#slide01:checked ~ .sliderControls label[for="slide01"],
#slide02:checked ~ .sliderControls label[for="slide02"],
#slide03:checked ~ .sliderControls label[for="slide03"],
#slide04:checked ~ .sliderControls label[for="slide04"],
#slide05:checked ~ .sliderControls label[for="slide05"],
#slide06:checked ~ .sliderControls label[for="slide06"] {
    background: #e5e5e5;
    color: #e5e5e5;
}

/* ------------------------------------------------------Slider Ende------------------------------------------------------- */



#index_zitat {
	width: 768px;
	height: 138px;
	float: left;
	padding-top: 36px;
	background-color: #e5e5e5;
	}

#index_infobox {
	width: 768px;
	height: 174px;
	float: left;
	background-image: url(./images/index_infobox.png);
}

#index_neu {
	width: 768px;
	height: 174px;
	float: left;
	background-image: url(./images/neu.png);
}


#index_text {
	background-color: #FFFFFF;
	width: 706px;
	height: 275px;
	float: left;
	padding-top: 40px;
	padding-left: 62px;
	/*background-image: url(./images/index_text.png);*/
}
#index_text a {
	text-decoration: none;
	color: #004ebc;
}
#index_text a:hover {
	color: #4A8FF0;
}


/* ueberuns */
#ueberuns_keyvisual_1 {
	width: 768px;
	height: 315px;
	float: left;
	background-image: url(./images/ueberuns_keyvisual_1.png);
}

#ueberuns_text {
	width: 644px;
	height: 507px;
	float: left;
	padding-left: 62px;
	padding-right: 62px;
	padding-top: 15px;
	background-color: #e5e5e5;
}

#ueberuns_keyvisual_2 {
	width: 768px;
	height: 315px;
	float: left;
	background-image: url(./images/ueberuns_keyvisual_2.png);
}

#ueberuns_produkte {
	width: 706px;
	height: 305px;
	float: left;
	background-image: url(./images/ueberuns_produkte.png);
	padding-left: 62px;
	padding-top: 10px;
	text-decoration: none;
}
#ueberuns_produkte a{
	padding-right: 20px;
	padding-top: 15px;
	float:right;
	font-family: 'exomedium', Arial;
	font-size: 16px;
	font-weight: normal;
	color: #a0a0a0;
	text-decoration: none;
}
#ueberuns_produkte a:hover{
	color: #FFFFFF;
}

#ueberuns_emig_text {
	width: 644px;
	height: 338px;
	float: left;
	padding-left: 62px;
	padding-right: 62px;
	padding-top: 10px;
	background-color: #FFFFFF;
}
#ueberuns_emig_text a {
	text-decoration: none;
	color: #004ebc;
}
#ueberuns_emig_text a:hover {
	color: #4A8FF0;
}



/* produkte */

#produkte_uebersicht {
	width: 708px;
	height: 666px;
	background-image: url(./images/produkte_uebersicht.png);
	float: left;
	padding-left: 62px;
	padding-top: 30px;
}
#produkte_uebersicht a {
	text-decoration: none;
	color: #004ebc;
}
#produkte_uebersicht a:hover {
	color: #4A8FF0;
}

#oekotex {
	width: 644px;
	height: 323px;
	float: left;
	padding-left: 62px;
	padding-right: 62px;
	padding-top: 25px;
	background-color: #e5e5e5;
	background-image: url(./images/oekotex_text.png);
}

#produkte_1_einfassbaender {
	width: 768px;
	height: 315px;
	float: left;
	background-image: url(./images/produkte_1_einfassbaender.png);
}

#produkte_1_einfassbaender_text {
	width: 644px;
	height: 305px;
	font-size: absolute;
	float: left;
	padding-left: 62px;
	padding-right: 62px;
	padding-top: 10px;
	background-color: #e5e5e5;
}
#produkte_1_einfassbaender_text a {
	text-decoration: none;
	color: #004ebc;
}
#produkte_1_einfassbaender_text a:hover {
	color: #4A8FF0;
}

#produkte_2_hosenbund {
	width: 768px;
	height: 315px;
	float: left;
	background-image: url(./images/produkte_2_hosenbund.png);
}

#produkte_2_hosenbund_text {
	width: 644px;
	height: 305px;
	float: left;
	padding-left: 62px;
	padding-right: 62px;
	padding-top: 10px;
	background-color: #e5e5e5;
}
#produkte_2_hosenbund_text a {
	text-decoration: none;
	color: #004ebc;
}
#produkte_2_hosenbund_text a:hover {
	color: #4A8FF0;
}

#produkte_3_futterstoffe {
	width: 768px;
	height: 315px;
	float: left;
	background-image: url(./images/produkte_3_futterstoffe.png);
}

#produkte_3_futterstoffe_text {
	width: 644px;
	height: 305px;
	float: left;
	padding-left: 62px;
	padding-right: 62px;
	padding-top: 10px;
	background-color: #e5e5e5;
}
#produkte_3_futterstoffe_text a {
	text-decoration: none;
	color: #004ebc;
}
#produkte_3_futterstoffe_text a:hover {
	color: #4A8FF0;
}



/* emig */

#emig_keyvisual {
	width: 768px;
	height: 315px;
	float: left;
	background-image: url(./images/emig_keyvisual.png);
}

#emig_text {
	width: 644px;
	height: 387px;  /*507*/
	float: left;
	padding-left: 62px;
	padding-right: 62px;
	padding-top: 15px;
	background-color: #e5e5e5;
}

#emig_logo {
	width: 768px;
	height: 120px;
	float: left;
	background-color: #e5e5e5;
	background-image: url(./images/emig_logo.png);
}



/* kontakt */

#kontakt_firmengebaeude {
	width: 768px;
	height: 315px;
	float: left;
	background-image: url(./images/kontakt_firmengebaeude.png);
}

#kontakt_text {
	width: 322px;
	height: 507px;
	float: left;
	padding-top: 15px;
	padding-left: 62px;
}

#map {
	width: 322px;
	height: 512px;
	float: left;
}



/* impressum */

#impressum_text {
	width: 706px;
	height: 612px;
	float: left;
	padding-top: 10px;
	padding-left: 62px;
	background-image: url(./images/impressum_text.png);
}



/* datenschutz */

#datenschutz_text {
	width: 644px;
	height: 8500px;
	float: left;
	padding-top: 10px;
	padding-left: 62px;
	padding-right: 62px;
	background-color: #e5e5e5;
	background-image: url(./images/datenschutz_text.png);
}
#datenschutz_text a {
	text-decoration: none;
	color: #004ebc;
}
#datenschutz_text a:hover {
	color: #4A8FF0;
}







/* Text */

@font-face {
    font-family: 'exomedium';
    src: url('./fonts/exo-medium-webfont.eot');
    src: url('./fonts/exo-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/exo-medium-webfont.woff2') format('woff2'),
         url('./fonts/exo-medium-webfont.woff') format('woff'),
         url('./fonts/exo-medium-webfont.ttf') format('truetype'),
         url('./fonts/exo-medium-webfont.svg#exomedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'exolight';
    src: url('./fonts/exo-light-webfont.eot');
    src: url('./fonts/exo-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/exo-light-webfont.woff2') format('woff2'),
         url('./fonts/exo-light-webfont.woff') format('woff'),
         url('./fonts/exo-light-webfont.ttf') format('truetype'),
         url('./fonts/exo-light-webfont.svg#exolight') format('svg');
    font-weight: normal;
    font-style: normal;
}
	@font-face {
    font-family: 'exoitalic';
    src: url('./fonts/exo-italic-webfont.eot');
    src: url('./fonts/exo-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/exo-italic-webfont.woff2') format('woff2'),
         url('./fonts/exo-italic-webfont.woff') format('woff'),
         url('./fonts/exo-italic-webfont.ttf') format('truetype'),
         url('./fonts/exo-italic-webfont.svg#exomedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*Überschrift*/
h2 {
	font-family: 'exomedium', Arial;
	font-size: 26px;
	font-weight: normal;
	color: #004ebc;
	margin-bottom: 0px;
}
/*Exo italic kursiv für das Zitat auf der index-Seite*/
h3 {
	font-family: 'exoitalic', Arial;
	font-size: 18px;
	line-height: 120%;
	font-weight: normal;
	letter-spacing: 0.02em;
	color: #004ebc;
	padding-bottom: 0px;
}

/*Blaue Links im Fließtext
h4 {
	font-family: 'exomedium', Arial;
	font-size: 16px;
	color: #00FF00;
}
*/


/*Textauszeichnung Exomedium blau für die Kontaktdaten auf der kontakt-Seite und "Robert Bosch" auf der index-Seite*/
h5 {
	font-family: 'exomedium', Arial;
	font-size: 16px;
	font-weight: normal;
	color: #004ebc;
	line-height: 130%;
	padding-top: 0px;
}
p {
	font-family: Verdana, Arial;
	font-size: 14px;
	color: #4d4d4d;
	line-height: 160%;
	text-decoration: none;
}


