/* ### CSS selbst-gemacht.net - CMS 2009 ### */

/* Farben:
	
	Links: #c10134
	Hover: #c10134
	Text:  #3c3c3e
	
	
	Schriftgrößen:
	
	Menü:  (Hover)
	Text: 12px
	Schirft: ARIAL
	
*/

/* Rücksetzen der Standard Werte -------------------------------------------------- */

html, body, div, dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background-repeat: no-repeat;
}

html {
	height:100%;
	margin-bottom:1px;
}



ul, li {	list-style: none;	}

img {
	border: 0px;
}

/* ### 1px Hack für Firefox 3 */
html>/**/body, x:-moz-any-link, x:default { position:relative; left:-0.1px; }

/*-------------------------------------------------------------------------------------------*/

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #3c3c3e;
	font-size: 13px;
	background-color: #FFFFFF;
	background-image: url('../gfx/layout/sg_headerbg.gif');
	background-repeat: repeat-x;
	margin: 0 auto 0 auto;
}

a {
	color: #3c3c3e;
	font-weight:bold;
	text-decoration:none;
}

a:hover {
	border-bottom: 1px dotted #c10134;
}

a:visited {
	
}

/* ### QTIP TOOLTIP ### */

.qtip-content {
	line-height: 16px;
	font-size: 12px;
	color: #FFFFFF;
}
	

/* ### Ids und Classen */

#wrapper {
	width: 700px;
	margin: 0 auto 0 auto;
}

#header {
	width: 700px;
	height: 310px;
}

#headerLi {
	width: 318px;
	height: 310px;
	float:left;
}

	#headerLogo {
		width: 318px;
		height: 91px;
		margin: 30px 0px 0px 0px;
	}
	
	#headerLogo a:hover {
		border: 0px;
	}
	
	#headerHallo {
		width: 185px;
		height: 90px;
		margin: 60px 0px 0px 0px;
	}

#headerRe {
	width: 382px;
	height: 310px;
	margin-left: 318px;
}

	#headerLinks {
		width: 382px;
		height: 55px;
		text-align: right;
	}
	
	#headerPic {
		width: 382px;
		height: 255px;
	}


.whiteSpace {
	width: 700px;
	height: 45px;
}

#content {
	line-height: 20px;
}
	
	.contentBox {
		padding: 0px;
		margin: 0px 0px 35px 0px;
	}
		
		.headlineBox {
			float: left;
		}
		
		.textBox {
			margin-left: 210px;
			border-bottom: 1px solid #d8d8d8;
			padding-bottom: 25px;
		}
		
		hr {
			border-color: #d8d8d8;
			border-style: solid;
			border-width: 1px 0 0;
			clear: both;
			margin-top: 25px;
			margin-bottom: 25px;

		}
		
		.textBox table, .textBox p {
			margin-top: 0px;
		}
		
		.textBox ul {
			margin-left: 0px;
		}

		.textBox li {
			background-image: url('../gfx/icons/sg_pfeil_rechts.png');
			background-repeat: no-repeat;
			padding-left: 18px;
			line-height: 18px;
		}
		
		.textBox ul.tip li {
			background-image: url('../gfx/icons/sg_pfeil_rechts.png');
			background-repeat: no-repeat;
			padding-left: 18px;
			line-height: 18px;
		}
		
		.textBox ul.tip li a {
			cursor: pointer;
		}
		
		.listHeader {
			padding-left: 18px;
			font-weight: lighter;
			color: #333333;
			padding-bottom: 5px;
			background-image: url('../gfx/icons/sg_tag_grau.png');
			background-repeat: no-repeat;
			font-size: 14px;
			text-transform: uppercase;
		}
		
		.textBox h1, .textBox h2 {
			font-weight: lighter;
			font-size: 16px;
			color: #c10134;
			text-align: left;
			padding-bottom: 10px;
			margin: 0px;
		}
		
		.textBox #map {
			border: 1px solid #888888;
			float: right;
		}
		
		.textBox .hautnah, .textBox .slider {
			width: 190px;
			float: left;
		}
		
		.textBox .flaschen {
			color: #888888;
			font-size: 10px;
		}

/* ### FOOTER ### ------------------------------------------------------ */
	
#footer_wrapper {
	width: 100%;
	background-color: #2a2a2a;
}

	#footer {
		width: 700px;
		margin: 0 auto 0 auto;
		padding: 25px 0px;
		line-height: 20px;
		background-image: url('../gfx/layout/sg_footerCenterbg.gif');
		background-repeat: no-repeat;
		color: #dfdfdf;
		font-size: 12px;
	}
	
	#footer a {
		color: #dfdfdf;
	}
	
	#footer #telefon {
		background-image: url('../gfx/icons/sg_telefon_grau.gif');
		background-repeat: no-repeat;
		padding-left: 22px;
	}
	
	#footer #telefax {
		background-image: url('../gfx/icons/sg_telefax_grau.png');
		background-repeat: no-repeat;
		padding-left: 22px;
	}
	
	#footer #email {
		background-image: url('../gfx/icons/sg_email_grau.gif');
		background-repeat: no-repeat;
		padding-left: 22px;
	}
	
	#footerLi {
		padding: 5px 15px;
		border-left: 1px solid #dfdfdf;
		float: left;
		width: 180px;
	}
	
	#footerMid {
		padding: 5px 15px;
		border-left: 1px solid #dfdfdf;
		float:left;
		width: 240px;
	}
	
	#footerRe {
		padding: 5px 15px;
		border-left: 1px solid #dfdfdf;
		width: 180px;
		float: left;
	}
	
	#footerBottom {
		width: 700px;
		padding-top: 20px;
		padding-bottom: 35px;
		line-height: 25px;
		font-size: 11px;
		clear: both;
	}
	
	.google {
		cursor: pointer;
	}

	
/* ### SLIDER ### */

#s3slider li{
	background-image:none;
	padding-left: 0px;
}

#s3slider {
   width: 290px; /* important to be same as image width */
   height: 180px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
   border: 1px solid #888888;
   float: right;
}

#s3sliderContent {
   width: 290px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 12px/15px Arial, Helvetica, sans-serif;
   padding: 5px 13px;
   width: 290px;
   background-color: #3c3c3e;
   filter: alpha(opacity=60); /* here you can set the opacity of box with text */
   -moz-opacity: 0.6; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.6; /* here you can set the opacity of box with text */
   opacity: 0.6; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
}