/* BODY
-------------------------------------------------------------------- */
body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
	padding: 0;
	text-align: left;
	background-color: #FFFFFF; background-image: url(../img/bg-body-03.jpg); background-repeat: repeat-x;
	line-height: 1.5em;
}
body.iframe { text-align: left; }

/* FORMULARELEMENTE
-------------------------------------------------------------------- */
form{ color: #333333; padding: 0; margin: 0; }
form.map { width: 270px; }
label{ font-weight:bold; font-size:100%; }
radio{ color: #333333; }
input{
	font-family: Tahoma, Verdana, Arial; 
	font-size: 100%;
	background-color:#FFFFFF;
	color: #333333;
	padding: 4px;
	border: 1px solid #dedede;
}
input.zweihundert{ width: 200px; }
input.plz{ width: 66px; }
input.ort{ width: 230px; }
input.ohne_rahmen{
	border-width:0;
	background-color:#FFFFFF;
	color: #333333;
	width: 15px;
	height: 15px;
	background-image: none;
}
input.button{ background-color: #dc2b1c; color: #FFFFFF; border: none; font-size: 100%;}
input.button:hover { border: none;}

input.error { border-color: #dc2b1c; }
select{
	font-family: Verdana; font-size: 100%;
	background-color:#FFFFFF;
	color: #333333;
	padding: 3px;
	margin-bottom: 2px;
	border: 1px solid #dedede;
}
select.hundert{ width: 140px; }
select.zweihundert{ width: 250px; }
textarea{
	font-family: Verdana; font-size: 100%;
	background-color:#FFFFFF;
	color: #333333;
	height: 123px;
	padding: 4px;
	border: 1px solid #dedede;
	overflow: auto;
}
span.pflicht {color: #dc2b1c; font-weight: bold; font-size: 100%;}
fieldset {
	width: 100%;
	padding: 0;
	position: relative;
	line-height: 1.5;
	border: none;
}
legend {
	font-size: 120%;
	font-weight: bold;
	padding: 2px;
	color: #333333;
	line-height: 1.3;
}
#kontaktformular label{ clear: both; }
input.falle { display: none; }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="button"],
textarea {
	width: 410px;
}

/* TABELLEN
-------------------------------------------------------------------- */
table{	font-family: Arial, Helvetica, sans-serif;}
tr{	font-size: 100%; font-family: Arial, Helvetica, sans-serif; }
tr.mittel{ background: #cccccc; font-family: Arial, Helvetica, sans-serif; }
tr.hell{ background: #eeeeee; font-family: Arial, Helvetica, sans-serif; }
th{ font-size: 100%; color: #000000; font-family: Arial, Helvetica, sans-serif; }
td{ font-size:0.8em; font-family: Arial, Helvetica, sans-serif; color: #333333; padding: 4px 3px; }

/* ALLGEMEINE FORMATIERUNGEN
-------------------------------------------------------------------- */
p{ font-size: 100%; font-family: Arial, Helvetica, sans-serif; color: #333333; line-height: 1.5em; margin-bottom: 15px; }
p.klein{ font-size: 80%; color: #333333; }
p.abschluss{ font-size: 80%; color: #000000; }
p.referenz{ padding-top: 7px; }
a{ font-size: 100%; color: #dc2b1c; text-decoration: none; }
a:hover{ color: #000000; text-decoration: none; }
a.klein{ font-size: 80%; }
a.noborder:hover { border: 0; text-decoration: none; }
a.button { padding: 5px 5px 5px 25px; background-color: #000000; color: #FFFFFF; font-weight: bold;	border: none; -moz-border-radius: 3px; border-radius: 3px;  background-position: 5px 5px; background-repeat: no-repeat;}
a.button:hover { background-color: #dc2b1c; color: #FFFFFF;}
.blaettern { padding: 5px; border: 1px dotted #dedede; text-align: center; background-color: #eeeeee; margin: 5px;}
.aktuell { background-color: #cccccc; font-weight: bold;}
a.blaettern:hover { background-color: #cccccc; }
hr{ border: 0px; border-bottom: 1px solid #dedede; margin: 10px 0; height: 1px; }
.erfolg { padding: 10px; background-color: #e9f9e5; color: #333333; border: 1px solid #75965f; }
.fehler { padding: 10px; background-color: #f9e5e6; color: #dc2b1c; border: 1px solid #dc2b1c; }
ul { margin: auto; padding-left: 30px;}
li { color: #333333;  }
sup,
sub {
	font-size: 70%;
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	position: relative;
}
sup {bottom: 1ex;}
sub {top: .5ex;}

/* RAHMEN
-------------------------------------------------------------------- */
.wrap{
	margin: 0 auto;
	padding: 0 20px;
	background-color: #FFFFFF;
	overflow:hidden;
	background-image: url(../img/bg-header.jpg); background-repeat:no-repeat; background-position: top right;
}

/* HEADER
-------------------------------------------------------------------- */
#header{
	margin: 0 auto;
	padding: 0;
	text-align: left;
	z-index:20;
	position:relative;
}
#bghalter {  }
#topnavi { text-align: left; color: #797979; padding-top:5px; }
#topnavi a { color: #797979; font-size: 85%; }
#topnavi a:hover { color: #dc2b1c; }
#flaggen { text-align: right; }

#warenkorb { background-color: #797979; background-image: url(../img/warenkorb.png); background-position: 5px 5px; background-repeat: no-repeat; color: #FFFFFF; padding: 3px 5px 3px 0; margin: 15px 0; text-align:right; }
#warenkorb a, #warenkorb a:hover { color: #FFFFFF; font-size: 85%; width: 100%; padding: 0; display:block; }
#suche form{margin: 0; padding: 0;}
#suche #suchefeld { height: 22px; border: 1px solid #797979; background: #FFFFFF; background-image: url(../img/lupe.gif); background-position: 5px 4px; background-repeat: no-repeat; padding: 0 0 0 25px; }
#suche #suchebutton { width: 100%; height: 24px; margin: 0 0 0 3px; padding: 2px; border: none; background: #dc2b1c; color: #FFFFFF; font-size: 80%; text-align: center; float: right; cursor: pointer;}

#top-rot { height: 5px; background: #dc2b1c; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; clear:both; }

/* NAVIGATION 
-------------------------------------------------------------------- */
nav#main-nav{
	font-size:100%;
	background-color: #dedede;
}

/* All Levels */
nav#main-nav ul{
	margin:0px;
	padding:0px;
	display:block;
}
nav#main-nav ul li a{
	font-size: 110%;
	text-transform: uppercase;
	font-weight: bold;
	text-align: left;
	display: block;
	color: #333333;
	padding: 5px 10px;
	margin: 0;
	letter-spacing: 0em;
	border: 0;
	text-decoration: none;
}

/* Top Level */
nav#main-nav > ul{
list-style: none;}
nav#main-nav > ul > li{
	list-style: none;
	display:inline-block;
	padding:0;
	margin:0;
	position:relative;
}
nav#main-nav ul li.agileHover,
nav#main-nav ul li:hover{
	z-index:30;
}
nav#main-nav > ul > li > a{
	-moz-transition: all .1s ease-in-out;
	-webkit-transition: all .1s ease-in-out;
	-o-transition: border-color, color, padding-top .1s ease-in-out; /* Opera likes to be theatrical with font size, so we can't use 'all' */
	transition: all .1s ease-in-out;
}
nav#main-nav > ul > li:hover > a,
nav#main-nav > ul > li > a:hover,
nav#main-nav > ul > li > a.aktiv{
	color:#dc2b1c;
}

/* Second Level */
nav#main-nav > ul li ul{
	list-style: none;
	top:100%;
	left:0;
	position:absolute;
	display:block;
	height:0px;
	overflow:hidden;
	opacity:0;	
	min-width:100%;
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
	background-color:rgba(240,240,240,.9);
	background-color:#eee;
}
nav#main-nav > ul > li:hover > ul{
	height:auto;
	opacity:1;
	overflow:visible;
	display:block;
}
nav#main-nav ul ul li{
	list-style: none;
	position:relative;
	margin:0;
	padding:0;
	border-bottom:1px solid #dedede;
}
nav#main-nav ul ul li a{
	font-weight:normal;
	color:#000;
	padding:.6em 1.3em;
	text-transform:none;
	display:block;
	width: 150px;
}
nav#main-nav ul ul li a:hover{
	color:#000;
	background-color:rgba(230,230,230,1);
	background-color:#ddd;
}

/* 3rd + Levels */
nav#main-nav ul ul li ul{
	position:absolute;
	top:0;
	left:100%;
	font-size:100%;
}
nav#main-nav ul ul li:hover ul{	
	height:auto;
	opacity:1;
}

/* Mobile */
.nav-close{
	display:none;
	font-size:8px;
	text-transform:uppercase;
	padding:1px 8px;
	background:#dedede;
	text-decoration:none;
	position:absolute;
	z-index:50;
}

a.mobile-menu-button{
	display:none;
}

/* SUB-NAVIGATION
-------------------------------------------------------------------- */
#unternavi { list-style: none; text-align: left; }
#unternavi li { list-style-image:none; text-align: left; }
#unternavi li a {
	font-weight: bold;
	display: block;
	color: #333333;
	text-align: left;
	letter-spacing: 0em;
	border-bottom: 1px solid #dedede;
	text-decoration: none;
}
#unternavi li a:hover, #unternavi li a.aktiv { text-decoration: none; color: #dc2b1c; }
#unternavi li li a { font-weight: normal; }
#unternavi li li li a { border-bottom: none; }
#unternavi ul { list-style: none; text-align: left; }

/* INHALTSBEREICH
-------------------------------------------------------------------- */
h1{ font-size:170%; font-weight:normal; color:#000000; margin: 0 0 20px 0; padding: 5px 0 15px 0; }
h2{ font-size:150%; font-weight:normal; color:#000000; margin: 0 0 10px 0; padding: 0; }
h3{ font-size:130%; font-weight:normal; color:#333333; margin: 15px 0 5px 0; padding: 0; }
h4{ font-size:100%; font-weight:bold; margin: 2px 0; padding: 0; }

strong { font-weight: bold; }
em { font-style:italic; }

#breadcrumb { font-size: 80%; color: #797979; border-bottom: 1px solid #dedede; margin-top: 20px; margin-bottom: 20px; }

#kontaktinfos { padding:10px; border: 1px solid #dedede; }

.sidebar a.btn { display: block; padding: 3px 10px 3px 30px; margin: 1px 0 0 0; background: #dedede; color: #000000; background-position: 5px 4px; background-repeat: no-repeat; font-weight: bold; }
.sidebar a.btn:hover { background: #d1d1d1; background-position: 5px 4px; background-repeat: no-repeat; }
.sidebar a.qualitaet, .sidebar a.qualitaet:hover { background-image: url(../img/qualitaet.png); }
.sidebar a.bestell, .sidebar a.bestell:hover { background-image: url(../img/bestell.png); }
.sidebar a.pdfkatalog, .sidebar a.pdfkatalog:hover { background-image: url(../img/pdfkatalog.png); }

/* FLEXSLIDER
-------------------------------------------------------------------- */
.flex-start {}
.flexslider p { text-align:left; padding-top: 7px; font-size:85%;}
.flex-pauseplay .play { background-image: url(../img/icons/play.png);}
.flex-pauseplay .pause { background-image: url(../img/icons/pause.png);}
.flex-control-nav {
	width: 100%;
	position: absolute;
	bottom: 10px;
	text-align: center;
	display: none;
}
.flex-control-nav li a {
	background: url(../img/bg_control_nav.png) no-repeat;
	background-image:none;
	background-color:#9c9e9f;
	background-color:rgba(156, 158, 159, .6);
}
.flex-control-nav li a:hover {
	background-color:#58585a;
	background-color:rgba(88, 88, 90, .5);
}
.flex-control-nav li a.active {
	background-color:#58585a;
	background-color:rgba(88, 88, 90, .8);
}

/* PRODUKTE
-------------------------------------------------------------------- */
.msg_head { cursor: pointer; color:#dc2b1c; }
.msg_body { border: 1px solid white; }
.ref_head { cursor: pointer; color:#dc2b1c; }
.ref_body { border: 1px solid white; }
.produktkategorie ul { margin: 0; }
.produktkategorie li { list-style-image: none; list-style:disc; margin: 5px auto; }
.produktkategorie li a { color:#797979; }
.produktkategorie p { margin: 0; }

thead th {
	padding: 3px 11px 3px 3px;
	border-bottom: 1px solid black;
	font-size: 0.8em;
	font-weight: normal;
}
tfoot {border-top: 2px solid black;}
tfoot td {
	padding: 4px;
	font-size: 0.9em;
	font-weight: bold;
}

#basket_empty, #basket_empty:hover { background-color: #797979; background-image: url(../img/warenkorb_delete.png); background-position: 5px 7px; background-repeat: no-repeat; color: #FFFFFF; padding: 5px 5px 5px 30px; font-size: 85%; display:block; }

#jetzt_bestellen { background-color: #dc2b1c; background-image:none; display:block; color: #FFFFFF; padding: 5px 0; font-size: 85%; width: 100%; text-align:center; font-weight:bold;}

#bestellformular { padding: 10px; background-color: #dedede; }
#bestellformular label{ color:#dc2b1c; font-weight:normal; font-size:100%; font-style:italic; margin: 0 0 20px 0; padding: 0; display: compact; }

#versandfehler{ color: #FF0000; font-weight: normal; }

/* ZEBRA-TABELLEN
-------------------------------------------------------------------- */
#zebra tr td { background-color: #eeeeee; border-bottom: 1px solid #cccccc; }
#zebra tr.odd td { background-color: #FFFFFF; }

/* KONTAKT
-------------------------------------------------------------------- */
.kontaktbox{
	width: 100px; 
	float: left; 
	background-image: url(../img/anstrich.gif); 
	background-repeat: no-repeat; 
	background-position: 0 3px;
	padding-left: 18px;
}
a:hover.autor { border: 0px; }
form p { margin-bottom: 5px; }

/* FOOTER
-------------------------------------------------------------------- */
#footer {
	margin: 20px auto;
	padding: 0;
	color: #797979; 
	text-align: left;
	border-top: 1px solid #797979;
}
#footer p {
	color: #797979; 
	font-size: 85%;
	font-weight: normal;
	margin: 0;
	padding: 10px 0;
	text-align: center;
}
#footer a { color: #797979; }
#footer a:hover { color: #797979; border: 0; background: none; text-decoration: underline; }

/* IE7 PROBLEME
-------------------------------------------------------------------- */
*html input{ height: 22px; }
*html select { margin-right: 4px; }
*html fieldset { margin-top: 15px; margin-bottom: 15px; }
*html fieldset legend {	float: left; position: relative; margin-top: -1.5em;}
*html #inhalt { margin: 0; height: 350px;}

/* #Media Queries
================================================== */

	/* Larger than standard 960 (devices and browsers) */
	@media only screen and (min-width: 960px) {
	
		/* Opera can't handle the absolute positioning and still use dropdowns, so position it with a margin instead */
		noindex:-o-prefocus,
		nav#main-nav {
			position:relative;
			right:auto;
		}
	}
	
	/* Three-column layout */
	@media only screen and (min-width: 768px) {	
		
		.far-edge{
			text-align:right;
		}		
		.nav-close{
			display:block;
			top:-30px;
			right:0;
		}
		
	}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		#header #masthead,
		#header nav#main-nav{
			clear:both;
			width:100%;
		}
		nav#main-nav{
			position:relative;
			right:auto;
			bottom:auto;
			margin-left:0;
		}
		nav#main-nav > ul > li:first-child{
			margin-left:0;
		} 
		nav#main-nav > ul{
			float:none;
		}
		nav#main-nav ul li a{ font-size: 90%;}
		.sidebar a { font-size: 80%;}
		
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		
		#header-inner{
			text-align:center;
		}
		nav#main-nav ul li ul{
			text-align:left;
		}						
		.nav-close{
			display:block;
			top:-28px;
			left:0;
			right:auto;
		}
		
		.contact-form textarea{
			width:492px;
		}
		
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
				
		a.mobile-menu-button{
			display:inline-block;
			text-decoration:none;
			text-transform:uppercase;
			font-size:.9em;
			font-weight:bold;
			margin:0;
			background-color: #797979;
			color: #FFFFFF;
			padding: 10px;
		}
		
		#header nav#main-nav{
			width:300px;
			position:relative;
			background: none;
			margin-top: 2em;
		}
		
		nav#main-nav ul.nav-menu,
		nav ul.nav-menu{
			display:none;
			position:absolute;
			width:300px;
			background:#eee;
		}
		nav#main-nav ul.nav-menu.menu-open,
		nav ul.nav-menu.menu-open{
			display:block;
		}
		
		nav#main-nav ul.nav-menu > li,
		nav ul.nav-menu > li{
			padding:5px 10px 5px 10px;
			margin:0;
			
			float:none;
			display:block;
			margin-left:0px;
			margin-top:.4em;
		}
		
		nav ul.nav-menu li a:hover,
		nav ul.nav-menu li:hover > a{
			font-weight:bold;
		}
		nav ul.nav-menu li ul,
		nav#main-nav ul.nav-menu li ul{
			background:#e9e9e9;
		}
		
		nav ul.nav-menu li ul li a:before{
			content: '+ ';
			
		}
		nav#main-nav ul ul li ul{
			left:0;
			top:100%;
		}

		#main .single .img-wrapper{
			width:100%;
			padding-right:0;
		}
		.single-post-feature-expander{
			display:none;
		}
		
		blockquote cite{
			bottom:-.8em;
		}
		
		.sidebar{
			margin-top:3em;
		}
		
		.far-edge{
			text-align:left;
		}
		
		#top-rot { display: none; }
		#suche #suchefeld { width: 393px;}
		
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) { #sidebarnavi {display: none;} .nophone {display: none;} }

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) { #sidebarnavi {display: none;} .nophone {display: none;} #suche #suchefeld { width: 273px;}}