body {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	font-family: sans-serif;
	width: 100vw-20px;
	min-width: 600px;
	/*100vw entsprechen 100% der viewport Breite, entsprechend vh für viewport Höhe*/
}

a {
	text-decoration: none;
	color: #1010c0;
	
}

a:hover {
	text-decoration: underline;
	-moz-text-decoration-color: #cf0000;
	-webkit-textdecoration-color: #cf0000;
	text-decoration-color: #cf0000;
}

#impressum {
	align: center;
	border: 0px;
	padding: 1em;
	border-spacing: 1em;
	font-size: normal;
}


/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
nav {
	border-radius: 0.2em 0.2em 0.2em;
	border: 1px solid;
	padding: 10px;
	margin: 10px;
	-webkit-flex: 1 100%;
	flex: 1 100%;
}

aside {
	padding: 1em;
	-webkit-flex: 1 100%;
	flex: 1 100%;
	background-color: #F5F6F7;
}

header {
	margin-left: 10px;
	margin-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	-webkit-flex: 0 1 100%;
	flex: 0 1 100%;
	/*background: #f5f6f7;*/
	background: -webkit-linear-gradient(bottom, #e1e2e3, #f6f7f8);
	background: linear-gradient(to bottom, #e1e2e3, #f6f7f8);
	display: -webkit-flex;
	-webkit-flex-flow: row wrap;
	display: flex;
	flex-flow: row wrap;
	/*background-image: url(./../img/eye_bg.png);
	background-repeat: repeat; */
	height: auto;
}

header * {
	-webkit-flex: 1 1 0;
	flex: 1 1 0;
}

header img {
	-webkit-flex: 0 0 200px;
	flex: 0 0 200px;
	margin-right: 0px;
	margin-left: 0px;
}

/* Article umfasst �berschrift (section #title), Hauptseitenteil und Bereich f�r Links/Datenbl�tter (section #specs) */
article {
	display: -webkit-flex;
	-webkit-flex-flow: row wrap;
	display: flex;
	flex-flow: row wrap;
	margin-top: 0px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 1em;
	padding: 0px;
	-webkit-flex: 1 1 100%;
	-webkit-flex-order: 2;
	flex: 1 1 100%;
	order: 2;
	text-align: justify;
	min-height: 55vh;
	/*	background-image: url(./../img/eye_bg.png);
	background-repeat: repeat; */
}

nav,nav ul,nav li {
	margin: 0px;
	padding: 0px;
	border: none;
}

nav ul {
	display: -webkit-flex;
	-webkit-flex-direction: column;
	display: flex;
	flex-direction: column;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}

nav li {
	list-style-type: none;
	list-style-position: outside;
	margin: 1.3em 1.3em;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
}

#buttons {
	margin: 0px;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	-webkit-flex-order: 1;
	/*Anordnung von Buttons und Navigationsbaum kann �ber order ge�ndert werden */
	order: 1;
}

#buttons ul {
	display: none; /*Ein- und Ausblenden der Buttons*/
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
	margin-right: 10px;
	background-color: #ffffff;
}

#buttons li {
	list-style-type: none;
	list-style-position: outside;
	margin-top: 1.3em;
	margin-left: 0px;
	margin-bottom: 1.3em;
	margin-right: 1.3em;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
}

#buttons a {
	font-size: large;
	font-weight: bold;
	color: #000000;
	display: inline-block;
	width: 95%;
	padding: 0.5em;
	text-decoration: none;
	text-align: center;
	border-radius: 0.3em 0.3em 0.3em;
	border: 1px solid #e1e2e3;
	background-color: #f5f6f7;
}

#buttons a:hover {
	border-radius: 0.3em 0.3em 0.3em;
	border: 1px solid #CF0000;
	background-color: #f5f6f7;
}

#baum {
	font-variant: small-caps;
	font-size: small;
	padding: 0px;
	padding-bottom: 10px;
	padding-top: 10px;
	-webkit-flex: 1 100%;
	flex: 1 100%;
	/* background: #ffffff; */
	/* Einstellung einer Farbe f�r den Hintergrunf des Navigationsbaumes*/
	/* Durch Setzen der Farbe kann der Baum z.B. Teil des Headers werden */
	display: -webkit-flex;
	-webkit-flex-flow: row wrap;
	-webkit-justify-content: space-between;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	-webkit-flex-order: 0;
	order: 0;
}

#baum nav {
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
}

#baum span { /*  color: #2020C0; */
	text-decoration: underline;
}

#baum a {
	border: 0px;
	color: #000000;
}

#product-table {
	width: 100%;
	font-size: small;
	border-collapse: collapse;
	padding: 0.3em;
	margin-top: 2em;
}

#product-table td, #product-table th {
	border: 1px solid black;
	padding: 0.3em 0.3em;
	vertical-align: middle;
	text-align: center;
}

#product-table tbody:nth-child(odd) tr:nth-child(odd){
	background: #eeeeee;
	}
#product-table tbody:nth-child(odd) tr:nth-child(even){
	background: #ffffff;
	}
#product-table tbody:nth-child(even) tr:nth-child(odd){
	background: #eeeeee;
	}
#product-table tbody:nth-child(even) tr:nth-child(even){
	background: #ffffff;
	}
		
	
#content {
	margin-bottom: 1em;
	max-width: 66em;
	padding: 0;
	-webkit-flex-order: 3;
	order: 3;
	webkit-flex: 1 1 100%;
	flex: 1 1 100%;
	height: auto;
}

#content ul {
	font-style: oblique;
	font-weight: 500;
}

/* Formatierung der Seiten�berschrift mit Bildbox */
#title {
	margin-top: 1em;
	margin-bottom: 0.5em;
	-webkit-flex: 1 100%;
	flex: 1 100%;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap;
	-webkit-justify-content: flex-start;
	-webkit-align-items: center;
	/*Ausrichtung von Bildern und �berschriftstext*/
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	font-size: x-large;
	/*Schriftgr��e �berschrift */
	font-variant: small-caps; /*Schriftart �berschrift*/
	-webkit-flex-order: 3;
	order: 3;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	font-size: x-large;
}

#title img {
	flex: 0 0 auto;
	margin-right: 20px; /*Abstand Bild zu �berscchrift*/
}

#produkt {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	padding-bottom: 20px;
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
	-webkit-flex-order: 3;
	order: 3;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap;
	display: flex;
	flex-flow: row wrap;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	justify-content: center;
	height: auto;
}

#produkt img {
	flex: 0 1 auto;
	padding-bottom: 1em;
	width: 25em;
	hspace: 1em;
	vspace: 1em;
}

#produkt ul {
	margin-top: 0px;
	padding-top: 0px;
	width: 100%;
	list-style: square;
}

#produkt ul li {
	padding: 0.5em;
}

#produkt p {
	width: 100%;
	align: justify;
}

/* Formatierung der section mit Links und Datenbl�ttern */
#specs {
	border-top: 1px solid; /* Trennlinie f�r Abschnitt Links/Datenbl�tter */
	border-color: #c1c2c3; /* Farbe Trennlinie */
	margin-left: 30px;
	margin-right: 10px;
	margin-top: 0px;
	-webkit-flex: 1 100%;
	flex: 1 100%;
	-webkit-flex-order: 3;
	order: 3;
}

#specs img {
	padding-right: 1em;
	width: 32px;
	vertical-align: middle;
}

/* Formatierung der Navigationsbox f�r Untermen�s */
#navigation {
	font-variant: small-caps;
	border-radius: 0.2em 0.2em 0.2em;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	/*margin-bottom: 10px;
	border: 1px solid;*/
	border-color: #c1c2c3;
	background: #ffffff;
	-webkit-flex-order: 2; /*4*/
	order: 2;  /*4*/
	-webkit-flex: 1 0 auto;
	flex: 1 0 auto;
}

#navigation span { /*  color: #2020C0; */
	text-decoration: underline; /*Formatierung der aktuellen Seite*/
}

#navigation h4 {
	font-weight: 500;
}

#navigation ul {
	padding-left: 1em;
	list-style: "\0025B8\ " outside; /*Listensymbol "Pfeil f�r Untermen�"*/
}

#navigation ul ul {
	padding-left: 1em;
	list-style: none outside;
}

#navigation ul li {
	margin-top: 0.5em;
}

#navigation ul span li {
	list-style-type: "\0025BE\ ";
	/*Listensymbol f�r gew�hltes Untermne� "Pfeil ausgeklapptes Untermen�"*/
}

#open {
	list-style-type: "\0025BE\ ";
}

#navigation ul ul span li {
	text-decoration: underline;
	list-style: none outside;
}

#navigation a { /*alle Links im Untermen�fenster schwarz*/
	color: #000000;
}

#buttonstyle {
	margin: 0px;
	width: 300px;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	-webkit-flex: 1 1 auto;
}

#buttonstyle ul {
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
	margin-right: 10px;
	background-color: #ffffff;
}

#buttonstyle li {
	list-style-type: none;
	list-style-position: outside;
	margin-top: 1.3em;
	margin-left: 0px;
	margin-bottom: 1.3em;
	margin-right: 1.3em;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
}

#buttonstyle a {
	font-size: large;
	font-weight: bold;
	color: #000000;
	display: inline-block;
	width: 95%;
	padding: 0.5em;
	text-decoration: none;
	text-align: center;
	border-radius: 0.3em 0.3em 0.3em;
	border: 1px solid #e1e2e3;
	background: linear-gradient(to top, #e3e4e5, #f8f9fa);
}

#buttonstyle a:hover {
	border-radius: 0.3em 0.3em 0.3em;
	border: 1px solid #CF0000;
	background-color: #f5f6f7;
}

/* Formatierung der Fusszeile mit Navigation zu Impressum und Kontakt */
footer {
	margin-top: 0px;
	margin-left: 10px;
	margin-right: 10px;
	padding-right: 10px;
	border-top: 2px solid #cf0000; /* Trennlinie f�r Footer*/
	background: -webkit-linear-gradient(top, #e1e2e3, #f6f7f8);
	background: linear-gradient(to top, #e1e2e3, #f6f7f8);
	/*background: #f5f6f7; /* Farbe Hintergrund*/
	-webkit-flex: 1 100%;
	-webkit-flex-order: 5;
	flex: 1 100%;
	order: 5;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;	
}

footer * {
	-webkit-flex: 1 1 0;
	-webkit-justify-content: flex-start;
	flex: 1 1 0;
	justify-content: flex-start;
}

footer nav {
	text-align: right;
	font-size: small;
}
footer nav ul li{
	text-align: left;
	font-size: small;
}

footer span:after {
	text-align: right;
	content:
		"\00A9\ 2003-2025 SYMPULS Gesellschaft für Pulstechnik und Meßsysteme mbH"
		;
}

footer a {
	font-variant: small-caps;
	color: #1010B8;
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
}

footer nav a {
	border: 0;
	padding: 0;
	margin: 0;
	text-align: left;
	font-size: small;
	margin: 10px;
}

footer nav a:hover {
	
}

#index {
	-webkit-flex: 1 1 1;
	flex: 1 1 1;
	-webkit-flex-flow: column-wrap;
	flex-flow: column-wrap;
	justify-content: center;
	/*padding: 20px;*/
	flex: 1 1 100%;
	background-image: url(./../img/eye_bg.png);
	background-repeat: repeat;
}

/* Smart Phones und Tablets mit mittlerer Aufl�sung */
@media all and (min-width: 35em) {
	header {
		webkit-justify-content: flex-end;
		justify-content: flex-end;
	}
	header img {
		margin-right: 0px;
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
	}
	article {
		margin: 0px;
		margin-bottom: 1em;
		margin-left: 10px;
		margin-right: 10px;
		padding: 0px;
		webkit-order: 3;
		order: 3;
		-webkit-flex: 5 1 0;
		flex: 5 1 0;
		padding: 0px;
		webkit-order: 3;
	}
	#baum {
		padding: 0;
		padding-top: 10px;
		-webkit-flex-order: 0;
		order: 0;
	}
	#baum div {
		text-align: right;
		font-size: small;
	}
	nav ul {
		-webkit-flex-direction: row;
		flex-direction: row;
	}
	nav li {
		margin: 10px;
		-webkit-flex: 0 1 0;
		flex: 0 1 0;
	}
	aside { /*durch auto werden die beiden asides in eine Zeile gesetzt */
		-webkit-flex: 0 1 auto;
		-webkit-order: 4;
		flex: 0 1 auto;
		order: 4;
	}
	#title {
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
	}
	#buttons {
		-webkit-flex-order: 1;
		order: 1;
	}
	#buttons ul {
		padding-left: 10px;
		background-color: #ffffff;
	}
	#buttons li {
		margin-top: 10px;
		margin-bottom: 10px;
		padding-left: 0;
		padding-right: 1em;
		width: 95%;
		-webkit-flex: 0 1 0;
		flex: 0 1 0;
	}
	#content {
		padding-left: 0px;
	}
	#title {
		padding-left: 0px;
	}
	#navigation {
		margin-top: 10px;
		margin-bottom: 0px;
		border: 1px solid;
		border-color: #e2e3e4;
		-webkit-flex: 1 100%;
		flex: 1 100%;
		-webkit-order: 3;
		flex: 1 100%;
		order: 3;
	}
	footer {
		webkit-order: 5;
		order: 5;
	}
}

/* Large screens */
@media all and (min-width: 66em) {
	header{
	margin-left: 1em;
	margin-right: 1em;
	margin-top: 1em;
	}
	
	article { /* Der Article wird 7x so breit wie die beiden asides! */
		margin: 0px;
		margin-bottom: 1em;
		margin-right: 1em;
		margin-left: 10px;
		-webkit-flex: 7 1 0;
		-webkit-order: 3;
		order: 3;
		flex: 7 1 0;
		min-height: 80vh;
		align-items: flex-start;
		align-content: flex-start;
		;
	}
	aside {
		flex: 1 1 0;
		
	}
	#baum {
		padding-left: 30px;
		-webkit-order: 0;
		order: 0;
		/*background-color: #f5f6f7;*/
	}
	#buttons {
		margin: 0px;
		padding: 0px;
		-webkit-order: 1;
		order: 1;
	}
	#buttons ul {
		background-color: #ffffff;
		padding-left: 20px;
	}
	#buttons li {
		margin-top: 10px;
		margin-bottom: 10px;
		padding-right: 1.3em;
	}
	#title {
		padding-left: 30px;
	}
	#content {
		padding-left: 30px;
		height: auto;
	}
	#produkt {
		margin-left: 30px;
		margin-right: 10px;
		margin-top: 0px;
		padding-bottom: 20px;
		-webkit-flex: 1 100%;
		flex: 1 100%;
		-webkit-flex-order: 3;
		order: 3;
		display: -webkit-flex;
		-webkit-flex-flow: row wrap;
		display: flex;
		flex-flow: row wrap;
		-webkit-align-items: flex-start;
		align-items: flex-start;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		height: auto;
	}
	#produkt img {
		align-self: center;
		padding-bottom: 1em;
		hspace: 1em;
		vspace: 1em;
		width: 35%;
	}
	#produkt ul {
		align-self: center;
		margin-top: 0px;
		padding-top: 0px;
		font-weight: 600;
		list-style: square;
		width: 58%
	}
	#produkt ul li {
		padding: 0.5em;
	}
	#navigation {
		border: 0px;
		margin: 0px;
		margin-left: 1em;
		padding-right: 1em;
		min-width: 200px; /*Breite des Untermen�-Blocks*/
		background: #f6f7f8;
		-webkit-flex: 1 0 0;
		/* mit 1 1 auto wird die Navigation immer so skaliert, dass alle Untermen�s in eine Zeile passen */
		-webkit-order: 2;
		-webkit-align-self: flex-top;
		flex: 1 0 0;
		order: 2;
		align-self: flex-top;
		
	}
	
	
	footer{
	margin-left: 1em;
	margin-right: 1em;
	margin-bottom: 1em;
}