@charset "utf-8";
/* 	CSS Document 
	März 2010
	Stefan Sajok
	
	rot			bd0b1d
	hellbraun	C6C0AA
	dklbraun	b4ac8f
	
*/
body
{
	font-size: 100.01%;
	font-family: "Trebuchet MS", Arial, sans-serif;
	line-height: 1.3em;
	margin: 0;
	padding: 0;
	background: #eeece6 url(../images/back/site.png) center top no-repeat;
}

/* //// //// //// //// //// Clearfix
//// //// //// //// //// //// //// //// //// */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }

/* IE-Patch für IE 6*/
* html .clearfix { 	height: 1%; }

/* IE-Patch für IE 7*/
*:first-child+html .clearfix { min-height: 0; }


/* //// //// //// //// //// Mainarea
//// //// //// //// //// //// //// //// //// */
#wrap
{
	width: 960px;
	margin: 0 auto 0 auto;
	font-size: 0.75em;
}

#navi { height: 100px; }
#main { height: 100%; background: #eeece6; }


/* //// //// //// //// //// Content
//// //// //// //// //// //// //// //// //// */
.kontakt, .referenzen { background: url(../images/back/cont_kontakt_back.gif) repeat-y; }
#rightcontprodukte, #rightcontleistungen { width: 571px; float: left; margin: 0; padding: 0; }
#rightcontkontakt { width: 521px; float: left; margin: 0; padding: 0 0 0 50px; }
#leftcontkontakt, #leftcontprodukte, #leftcontleistungen { width: 389px; float: left; margin: 0; padding: 0; }

/* //// //// //// //// //// Rubriken / Bilder
//// //// //// //// //// //// //// //// //// */
#headlinecont
{
	width: 100%;
	height: 180px;
	margin: 0;
	clear: both;
	background: #666 url(../images/back/headlines_back.gif) center top no-repeat;
	border-width: 10px 0 10px 0;
	border-color: #fff;
	border-style: solid;
}

#headlineback 
{ 
	width: 960px;
	background: #fff url(../images/navi/headlines_img.jpg) no-repeat;
	margin: 0 auto;
}

#headlines
{
	width: 960px;
	height: 180px;
	background: url(../images/navi/headlines_nav.png); !important; 
	background: url(../images/navi/headlines_navIE.gif); /* nur für den IE */
	margin: 0;
	padding: 0;
	position: relative;
}

#headlines span { display: none; }
#headlines ul { list-style-type: none; }
#headlines li { margin: 0; padding: 0; list-style: none; position: absolute; }
#headlines li, #headlines a { display: block; height: 180px; padding: 0; }

#headlines1 { left: 0; width: 184px; }
#headlines2 { left: 192px; width: 184px; }
#headlines3 { left: 388px; width: 184px; }
#headlines4 { left: 582px; width: 184px; }
#headlines5 { left: 776px; width: 184px; }

#headlines1 a:hover {background: transparent url(../images/navi/headlines_nav.png) -0 -180px no-repeat; }
#headlines2 a:hover {background: transparent url(../images/navi/headlines_nav.png) -192px -180px no-repeat; }
#headlines3 a:hover {background: transparent url(../images/navi/headlines_nav.png) -388px -180px no-repeat; }
#headlines4 a:hover {background: transparent url(../images/navi/headlines_nav.png) -582px -180px no-repeat; }
#headlines5 a:hover {background: transparent url(../images/navi/headlines_nav.png) -776px -180px no-repeat; }

/* //// //// //// //// //// Footer
//// //// //// //// //// //// //// //// //// */
#footcont
{
	width: 100%;
	height: 200px;
	background: #B1A98B url(../images/back/footer.png) center top no-repeat;
	padding: 10px 0;
}

#foot p
{
	margin: 0;
	font-size: 0.7em;
	letter-spacing: 0.07em;
	text-align: center;
	color: #000;
}

#foot p a, #foot p a:visited, #foot p a:focus {
    color: #000;
    text-decoration: none;
}

#foot p a:hover {
    color: #bd0b1d;
}


/* //// //// //// //// //// Navigation
//// //// //// //// //// //// //// //// //// */
#navigator
{
	width: 520px;
	height: 32px;
	background: url(../images/navi/navi_img.gif);
	margin: 50px 5px 0px 5px;
	padding: 0;
	position: relative;
	float: left;
}

#navigator span { display: none; }
#navigator ul { list-style-type: none; } 
#navigator li { margin: 0; padding: 0; list-style: none; position: absolute; }
#navigator li, #navigator a { display: block; height: 32px; padding: 0; }

#link1 { left: 0; width: 80px; }
#link2 { left: 80px; width: 120px; }
#link3 { left: 200px; width: 120px; }
#link4 { left: 320px; width: 110px; }
#link5 { left: 430px; width: 90px; }

#link1 a:hover { background: transparent url(../images/navi/navi_img.gif) -0 -32px no-repeat; }
#link2 a:hover { background: transparent url(../images/navi/navi_img.gif) -80px -32px no-repeat; }
#link3 a:hover { background: transparent url(../images/navi/navi_img.gif) -200px -32px no-repeat; }
#link4 a:hover { background: transparent url(../images/navi/navi_img.gif) -320px -32px no-repeat; }
#link5 a:hover { background: transparent url(../images/navi/navi_img.gif) -430px -32px no-repeat; }



/* //// //// //// //// //// Carousel
//// //// //// //// //// //// //// //// //// */
.stepcarousel
{
	position: relative;
	border: 0;
/*	overflow: scroll; leave this value alone*/
	overflow: hidden; /*leave this value alone*/
	width: 960px; /*Width of Carousel Viewer itself*/
	height: 350px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt
{
	position: absolute; /*leave this value alone*/
	left: 0;
	top: 0;
}

.stepcarousel .panel
{
	float: left; /*leave this value alone*/
	overflow: hidden; /*margin around each panel*/
	width: 960px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
	height: 350px;
}

.panel img { float: left; }

/* //// //// //// //// //// Headlines
//// //// //// //// //// //// //// //// //// */
h1 a:link, h1 a:visited { display: block; height: 90px; }

h1.logotop {
	background: url(../images/navi/logotop.gif) no-repeat;
	text-indent: -10000px;
	width: 250px;
	height: 90px;
	margin: 0;
	float: right;
}

h3 
{
	line-height: normal;
	margin: 0 0 0 1em;
	padding: 0.5em 0 0 0;
	color: #bd0b1d;
}

/* //// //// //// //// //// Images
//// //// //// //// //// //// //// //// //// */
.img_right 
{
	float: right;
	margin: 0 0 0 20px;
}

/* Referenzen */
.bsref { margin: 0 5px 5px 0; }
.bsrefoben { margin: 0 0 5px 0; }

/* //// //// //// //// //// Text
//// //// //// //// //// //// //// //// //// */

p.absatz { margin: 0.5em 1.5em 1.5em 1em; }
p.strong { font-weight: bold; }

p.absatzdkl
{
	margin: 1em 0 2em 0;
	padding: 0 1em;
	color: #666;
	font-weight: bold;
	font-size: larger;
}

#reflist li { list-style-type: circle; }

/* //// //// //// //// //// Tabs (Produkte)
//// //// //// //// //// //// //// //// //// */
a:link { color: #000; }
a:hover { color: #bd0b1d; }
a:visited { color: #b4ac8f; }

/* //// //// //// //// //// Tabs (Produkte)
//// //// //// //// //// //// //// //// //// */

#prodtabs
{
	margin: 0;
	padding: 0;
}

#tabsnav
{
	margin: 0;
	padding: 0;
	position: relative;
	float: left;
	text-indent: -5000px;
	width: 389px;
	height: 36px;
	background: url(../images/navi/tabsnav.gif);
}

#tabsnav ul { list-style-type: none;}
#tabsnav li { margin: 0; padding: 0; list-style: none; position: absolute; }
#tabsnav li, #tabsnav a { display: block; height: 36px; padding: 0; }

#tab1 { left: 0; width: 77px; }
#tab2 { left: 77px; width: 77px; }
#tab3 { left: 154px; width: 77px; }
#tab4 { left: 231px; width: 77px; }
#tab5 { left: 308px; width: 81px; }

#tab1 a:hover { background: transparent url(../images/navi/tabsnav.gif) -0 -77px no-repeat;}
#tab2 a:hover { background: transparent url(../images/navi/tabsnav.gif) -77px -77px no-repeat;}
#tab3 a:hover { background: transparent url(../images/navi/tabsnav.gif) -154px -77px no-repeat;}
#tab4 a:hover { background: transparent url(../images/navi/tabsnav.gif) -231px -77px no-repeat;}
#tab5 a:hover { background: transparent url(../images/navi/tabsnav.gif) -308px -81px no-repeat;}

#bodenfliesen { background: #bd0b1d; height: 326px; }
#wandfliesen { background: #c6c0aa; height: 326px; }
#mosaikfliesen { background: #eeece6; height: 326px; }
#marmorfliesen { background: #b4ac8f; height: 326px; }
#granitfliesen { background: #666666; height: 326px; }

.prodboden, .prodgranit { color: #fff; padding: 2em 1em 1em 1em; }
.prodwand, .prodmarmor, .prodmosaik { color: #000; padding: 2em 1em 1em 1em; }
.prodwand a:hover, .prodmarmor a:hover, .prodmosaik a:hover, .prodboden a:hover, .prodgranit a:hover { color: #00FF33; }
.prodwand a:link, .prodmarmor a:link, .prodmosaik a:link, .prodboden a:link, .prodgranit a:link { color: #ccc; }
.prodmosaik a:link { color: #666; }

/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
.ui-tabs-hide { display: none; } }
/* Hide useless elements in print layouts... */
@media print { .ui-tabs-nav { display: none; } }
.ui-tabs-nav a, .ui-tabs-nav a span { display: block; }
.ui-tabs-nav a { margin: 0; /* position: relative makes opacity fail for disabled tab in IE */
    padding-left: 0; color: #27537a;
    font-weight: bold; line-height: 1.2;
    text-align: center; text-decoration: none;
    white-space: nowrap; /* required in IE 6 */    
    outline: 0; /* prevent dotted border in Firefox */ }

/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */
    display: inline-block; }
*:first-child+html .ui-tabs-nav  { /* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */
    display: inline-block; }
.ui-tabs-panel { padding: 1em 8px; background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */ }


/* //// //// //// //// //// Slideshow (Produkte)
//// //// //// //// //// //// //// //// //// */
#slideshow
{
    position: relative;
    height: 350px;
}

#slideshow img
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    opacity: 0.0;
}

#slideshow img.active
{
    z-index: 10;
    opacity: 1.0;
}

#slideshow img.last-active
{
    z-index: 9;
}