/* ###############################################
Author: Jürgen Pemsel, P3 Concept :: media design
Designer:  www.reichertdesign, Reichert Design - Rainer Reichert
Version: 1.0
Datum: 05.03.2011
################################################# */

/********************* GENERAL ***********************/
@import url("../webfonts/questrial/stylesheet.css");

html { }
 
body {
	behavior: url("css/csshover3.htc");  /* Javascript to enable pseudo :hover class also in IE */
	color: #000;
	font: 0.9em arial, verdana, sans-serif;
	line-height: 1.3em;
	text-align: center; 
	margin: 0;
	padding: 0;
	background:url(../images/Kachel.jpg) top left repeat-x repeat-y; 
 	}
		
img	{ border:0; vertical-align:top; }	

/* links */
a             	{ color: #ff9900; text-decoration:underline; }
a:hover       { color: #333; text-decoration:none; }
a:active		{ color: #ff9900; text-decoration:none; }
:focus        	{ outline:0; }

/* headings */
h1,h2,h3,
h4,h5,h6      { margin:0px 0px 0px 0px; line-height:1.2em; font-weight: normal;  }
h1            { font-size:36px; 
				font-weight:normal;}
h2            { font-size:18px; }
h3            { font-size:12px; }
h4            { font-size:11px; }
h5            { font-size:10px; }
h6            { font-size:10px; }

/* tables */
table         { border:0; border-spacing:0; empty-cells:show; font-size:100%; }
caption,th,td { vertical-align:top; text-align:left; font-weight:normal; }

/* content paragraphs */
p             		{ margin:0 0 10px; line-height:1.3em;}
strong        { font-weight:bold; }
cite          	{ font-style:normal; }
blockquote    { quotes:none; font-style:italic;}

p.align-left { text-align: left; }
p.align-right { text-align: right; }
p.align-center { text-align: center; }
p.align-justify { text-align:justify; }

/* lists */
ul,ol         { list-style:none; }

/* spacers */
hr { border-left: none; border-right: none; border-top: 1px solid #999; border-bottom: none; margin: 0 0 20 0; clear:both;}

/* clearfix class */
.clear { clear: both; }
.cf:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
/* mandatory für safari !! */
.cf { display: inline-block; }
/* hides from IE-mac \*/
* html .cf {    height: 1%; }
.cf { display: block; }
/* end hide from IE-mac */

/* special styles */
.head{
	font-family: 'Questrial', arial, verdana, sans-serif;
	color:#333;
	text-align:center;
	font-weight:normal;
	}
.subhead{
	padding-top:0em;
	font-family: arial, verdana, sans-serif;
	color:#333;
	text-align:center;
	padding-bottom:0.5em;
	}

/*CSS3 Button* - thanks to http://css3button.net/ */

.botton-orange {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #ffffff;
	text-align:center;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#ff9900 0%,
		#ffc266 25%,
		#e38a04);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ff9900),
		color-stop(0.25, #ffc266),
		to(#e38a04));
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 3px solid #ffffff;
	-moz-box-shadow:
		0px 3px 11px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,000,217,1);
	-webkit-box-shadow:
		0px 3px 11px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,000,217,1);
	box-shadow:
		0px 3px 11px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,000,217,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.4),
		0px 1px 0px rgba(255,255,255,0.3);
}

button.button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffffff;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#ff9900 0%,
		#b85204);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ff9900),
		to(#b85204));
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	border: 5px solid #616161;
	-moz-box-shadow:
		2px 6px 9px rgba(000,000,000,0.3),
		inset 3px 4px 7px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		2px 6px 9px rgba(000,000,000,0.3),
		inset 3px 4px 7px rgba(255,255,255,0.7);
	box-shadow:
		2px 6px 9px rgba(000,000,000,0.3),
		inset 3px 4px 7px rgba(255,255,255,0.7);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.4),
		0px 2px 0px rgba(255,255,255,0.3);
}


	
	
.sample { color: #000000; }
.orange { color: #F90;  }
.smallfont { font-size: 0.87em; }
.very_smallfont { font-weight: normal; font-size: 0.8em; }
* html .smallfont { font-weight: normal; font-size: 0.82em; }
.bestpreis { color: ; font-size: 16px; font-weight: bold; }
.mwst { font-size: 10px; }
.headline {font-size:2.0em; font-weight:bold; }

/* transparency  */
.transparent { opacity: 0.5; filter:alpha(opacity=50); }


/********** LAYOUT AND POSITIONS **********/

/* outerWrapper */
#outerWrapper { width: 100%;  }

/*page */
#page { width: 960px;  padding: 0px;  margin: 0 auto 0 auto;  text-align: left; } 

/* head and company logo */
#head { float: left; width: 100%; height: 206px; margin: 0px 0px 0px 0px; }
#logo { position: top; width: 100%; height: 70px; margin: 0px 0px 0px 0px; }
#logo img.logo { margin: 0px 0px 0px 0px; }
#google_translate_element {
  width:190px;
  padding:0px 7px 7px 0px;
  z-index:99;
}
#google_translate_element li a {
color:#000;
}

/* navigation */
#navigationBar { float: left; width: 100%; height: 35px; }
#mainNavigation { } /* mainNavigation styles defined in superfish.css */

/* main content  */
#mainContent {	width: 100%;  float: left; margin: 10 0 5 0;  text-align: center; }
* html #mainContent { margin-bottom: 0px; }
#sliderWrapper { margin: 0 auto; width: 950px; height: 230px;  }
#textWrapper { margin: 0 auto; width: 950px; text-align: left;  }
* html #textWrapper { margin-bottom: 30px; }
#textWrapper h1 { font-weight: bold; margin: 10 0 20 0;}
#col3Wrapper { text-align: left; }
#bestellformularLink { z-index: 99; position: absolute; width: 154px; height: 29px; margin: 185 0 0 630; }
#formWrapper { float: left; width: 680px; text-align: left; padding: 20px; }
* html #formWrapper { margin-bottom: 0px; }
#formWrapper h1 { font-weight: bold; margin: 10 0 20 0; }
#formInfo { padding: 0 10 0 10; float: left; width: 255px; text-align: left; }
#iespacer { float: left; margin: 0; padding: 0; width: 600px; height: 0px; display:none; }
* html #iespacer { height: 20px; display: block; }

/* main content - 3column layout styles */
#col3Wrapper #leftBox { float: left; width: 295px; margin-right: 10px; padding: 5 10 15 10; }
#col3Wrapper #centerBox { float: left;  width: 295px; margin-right: 10px;  }
#col3Wrapper #centerBox #bemerkung { text-align: center; padding: 10 0 10 0; margin-bottom: 10px; }
#col3Wrapper #rightBox { float: left; width: 295px; }
* html #col3Wrapper #leftBox { width: 310px; }
* html #col3Wrapper #centerBox {  }
* html #col3Wrapper #rightBox { width: 310px; padding-bottom: 20px;  }

/* main content - 3column quicknavigation styles */
#quicknav { float: left; margin: 15px 0px 15px 0px; }
#quicknav .leftBox { float: left; height: 40px; margin: 0px 10px 10px 0px; }
#quicknav .centerBox { float: left;  text-align: center; width: 80%; height: 40px; margin-right: 10px;  }
#quicknav #centerBox #bemerkung { text-align: center; margin-bottom: 10px; }
#quicknav .rightBox { float: right; height: 40px;  }
* html #quicknav #leftBox { width: 20%; }
* html #quicknav #centerBox {  }
* html #quicknav #rightBox { width: 20%; padding-bottom: 20px;  }

/* promotion boxes bestpreis-pdf, pdf-to-go and links */
#promotion { float: left; margin: 15px 0px 15px 0px; }
* html #promotion { margin-left: 0px; }

/* the boxes  */
#promotion #leftBox { float: left; width: 270px; height: 173px; margin-right: 15px; padding: 5 20 15 10; }
#promotion #centerBox { float: left;  width: 279px; height: 173px; margin-right: 15px; padding: 5 20 15 10; }
#promotion #rightBox { float: left; width: 270px; height: 173px; margin-right: 0px; padding: 5 20 15 10; }
* html #promotion #leftBox { width: 310px; height: 210px; margin-right:12px; line-height: 0.9em;}
* html #promotion #centerBox { width: 310px; height: 210px; margin-right:12px;}
* html #promotion #rightBox { width: 310px; height: 210px; }

/* link button size for promus, drupus, tippus und gravus buttons */
#promotion .link { width: 270px; height: 72px; }

/* text styles for leftBox and centerBox */
.tablePromotion { margin: 5 0 0 -1; width: 100%; }
* html .tablePromotion { line-height:auto; }
.colLeistung { text-align: left; vertical-align: baseline; }
.colPreis { text-align: right; vertical-align: baseline; }

/* position  "zu den Angeboten" and "Weitere Infos zu PDF to go" */
#promotion #leftBoxLink { position: relative; top: 165px; left: 10px; }
#promotion #centerBoxLink { position: relative; top: 165px; left: 10px; }
#promotion #RightBoxLink { position: relative; top: 165px; left: 10px; }
* html #promotion #RightBoxLink,  * html #promotion #centerBoxLink,   * html #promotion #leftBoxLink { top: 160px; }


/* Tabelle box3 */
table.box3 { border-collapse:separate; margin: 0px 10px; }
table.box3 td { width:32%; border: thin solid #999; padding:10px;}
table.box3 td.spacer { width: 5px; border:none; padding:0px; }
table.box3 h2 { font-size:16px; font-weight:bold; margin-bottom: 10px;}






/* laufleiste */
#laufleiste { float: left; width: 100%; height: 112px; margin: 0 0 5 0; }

/* foot styles */
#foot { float: left; width: 100%; padding-top: 10px; }
#foot ul { padding: 15 0 25 0; margin: 0;}
#foot li { padding: 5 0 5 0; margin: 0; }

.footLeftCol { float: left; width: 300px; margin-right: 15px; margin-left: 20px; }
.footCenterCol { float: left;  width: 300px; margin-right: 15px; vertical-align: }
.footRightCol { float: left; width: 300px; }

#copyright { float: left; height: 20px; width: 100%; margin-top: 5px;  text-align: center;  }

/**********       SKIN ( STYLES COLORS BACKGROUNDS )    **********/

#head { background:url(/images/bg-head-rd2.jpg) top left no-repeat;  }
#logo img.logo { border: none; }
#navigationBar { background:url(/images/bg-navbar-black-rd.jpg) top left no-repeat;  }
#mainNavigation { } /* mainNavigation styles defined in superfish.css */

#textWrapper {
	color: #000;
}
#formWrapper { color: #555; border: 1px solid #999; }
#formInfo { color: #999; font-size: 12px; }
#col3Wrapper { }
#col3Wrapper #centerBox #bemerkung { background-color: #ff9900; color: #000; font-size: 12px;  }

#promotion #leftBox, #promotion #centerBox { border: 1px solid #bbb; }
#promotion #rightBox { border: 1px solid #bbb; }
#promotion #rightBox .link { border-bottom: 1px solid #bbb; }

/* images and over-images for link buttons */
#promotion div.promus {  background:url(/images/link-promus.jpg) top left no-repeat;  }
#promotion div.promus:hover {  background:url(/images/link-promus-over.jpg) top left no-repeat;  }

#promotion div.tippus {  background:url(/images/link-tippus.jpg) top left no-repeat;  }
#promotion div.tippus:hover {  background:url(/images/link-tippus-over.jpg) top left no-repeat;  }

#promotion div.drupus {  background:url(/images/link-drupus.jpg) top left no-repeat;  }
#promotion div.drupus:hover {  background:url(/images/link-drupus-over.jpg) top left no-repeat;  }

#promotion div.gravus {  background:url(/images/link-gravus.jpg) top left no-repeat;  }
#promotion div.gravus:hover {  background:url(/images/link-gravus-over.jpg) top left no-repeat;  }

#foot { font-size: 12px; color: #eee; background:url(/images/footer-abschluss-rd.jpg) bottom left no-repeat #ffffff; }
#foot a {color: #000000; text-decoration: none; }
#foot a:hover { color: #fff; text-decoration: underline; }
#foot a.current { color: #fff; text-decoration: underline; }

#copyright { font-size: 12px; color: #000000; }
#copyright a { color: #000000; text-decoration: none;}
#copyright a:hover { text-decoration: underline;}

/* auto slidewhow image container */
#imageContainer-1, #imageContainer-2, #imageContainer-3, #imageContainer-4 , #imageContainer-5 { float: left; }
#imageContainer-1 IMG, #imageContainer-2 IMG, #imageContainer-3 IMG, #imageContainer-4 IMG, #imageContainer-5 IMG { position:absolute; z-index:1; }
#imageContainer-1 IMG.toplevel, #imageContainer-2 IMG.toplevel, #imageContainer-3 IMG.toplevel, #imageContainer-4 IMG.toplevel, #imageContainer-5 IMG.toplevel { z-index:3; }
#imageContainer-1 IMG.middlelevel, #imageContainer-2 IMG.middlelevel, #imageContainer-3 IMG.middlelevel, #imageContainer-4 IMG.middlelevel, #imageContainer-5 IMG.middlelevel { z-index:2; }

/* google maps container */
#map { border: 1px solid #000; color: #444; }

/* forms  */
#mailform { margin: 0px; }	

#mailform a {
	font-style:italic;
	color: #ff9900;
	text-decoration: none;
	}
#mailform a:hover {
	text-decoration: underline;
	}

#mailform td { color: #555; padding: 5 10 5 0; }	

#mailform label { font-size: 11px;  clear: right; margin-top: 5px;  }
#mailform label.fragen { font-size: 14px; clear: right; margin-top: 5px;    }


#mailform input {
	font-size: 13px;
	background-color: #FFF;
	border-left: 2px solid #AAA;
	border-right: 1px solid #AAA;
	border-bottom: 1px solid #CCC;
	padding: 3px;
	clear: left; 
}
#mailform input.radio {
	font-size: 11px;
	color: #EEE;
	border: none;
	padding: 0px;
	margin: 0px 5px 0px 0px;
}
#mailform textarea {
	font: 13px Arial, Helvetica, sans-serif; 
	background-color: #FFF;
	border-left: 2px solid #AAA;
	border-right: 1px solid #AAA;
	border-bottom: 1px solid #CCC;
	padding: 5px; 
	clear: left; 
}
#mailform .mailform-submit {
	font-size: 12px;
	background-color: #DDD;
	padding: 5px;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	border-left: 1px solid #EEE;
	border-top: 1px solid #EEE;
}
#mailMessage {
	width: 400px;
	height: 20px;
	position: relative;
	top: 0px;
	left: 0px;
	
}

/* preload over images */
.hiddenPreloadImage {
  width:0px;
  height:0px;
  visibility:hidden;
}


/****************** SLIDER *********************/

/* Slider oben */
	#slider ul, #slider li {
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider li { 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:954px;
		height:230px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn { 
		display:block;
		width:16px;
		height:23px;
		position:relative;
		left:0px;
		top: -8px;
		z-index:1000;
		}	

	#nextBtn { 
		width: 39px;
		left:920px;
		top: -31px;
		}														

	* html #prevBtn  { left: -380px; }
	* html #nextBtn { left: 362px; }

	#prevBtn a, #nextBtn a {  
		display:block;
		height:23px;
		position:relative;
		background:url(/images/btn_prev.png) no-repeat 0 0;	
		}	
	#nextBtn a { 
		background:url(/images/btn_next.png) no-repeat 0 0;	
		}	

/* Slider Laufleiste */
	#slider_laufleiste ul, #slider_laufleiste li {
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider_laufleiste li { 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:950px;
		height:100px;
		overflow:hidden; 
		}	
	#prevBtn_laufleiste, #nextBtn_laufleiste { 
		display:block;
		width:16px;
		height:23px;
		position:relative;
		left:0px;
		top: -65px;
		z-index:1000;
		}	
	#nextBtn_laufleiste {
		width: 39px; 
		left: 920px;
		top: -90px;
		}														
	* html #prevBtn_laufleiste  { bottom: 90px; }
	* html #nextBtn_laufleiste { bottom: 90px; }

	#prevBtn_laufleiste a, #nextBtn_laufleiste a {  
		display:block;
		height:23px;
		position:relative;
		background:url(/images/btn_prev.png) no-repeat 0 0;	
		}	
	#nextBtn_laufleiste a { 
		background:url(/images/btn_next.png) no-repeat 0 0;	
		}