/* Styles for granit-pufe.de */
/* 100% width, 100% height */
/* reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {display:block;}
ul {list-style-type: none;}
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: none; }

body {
	background: #1c281c;
	font-family: Times, serif; 
	overflow: auto;
	}
html, body {
    height: 100%; /* important! */
	/*width: 100%;*/
	}

/* basic elements */
h3 {
	margin: 0 0 10px 0;
	}
a {
	color: #fff;
	}
/* basic divs */	
#wrapper {
	width: 100%; max-width: 1200px;  
	height: 100%; max-height: 859px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	}
	#wrapperBg {	
		width: 100%; height: auto;
		max-width: 1200px; max-height: 859px;
		z-index: 1;
		}
	.insideWrapper {
		position: absolute;
		z-index:5;
		}
 	.displayNone {
		display: none;	
		}
	#content {
		margin: 8% 0 0 0;
		width: 100%;
		height: 100%; max-height: 650px;
		}
		ul#navLeftUl {
			width: 20.8%; max-width: 246px;
			height: auto; max-height: 472px;
			position: absolute;
			top: 19.2%; left: 0; /*bottom: 15%;*/
			padding: 0; 
			}
		    ul#navLeftUl li {				
				margin: 0 0 7.2% 0; padding: 0;  border: 0;
				height: 100%; max-height: 55px;
				width: 100%; max-width: 246px;
				}
				img.navLeftImg {
					width: 100%; max-width: 246px;
					height: 100%; max-height: 55px;	
					}
		#navBottomUl {
			width: 73%; max-width: 875px; 
			height: 4.45%; /*max-height: 37px;*/  			 
			position: absolute;
			margin-left: 27%; 
			bottom: -0.2%;
			/*left: 27%; /*left: 325px; */
			}
			li.navBottomUlLi{
				float: left; display: block;
				height: 100%; max-height: 37px; 
				width: auto; 
				margin: 0 0.785% 0 0;/*margin: 0 1.85% 0 0;*/
				/*background: #000;*/
				}	
			li.navBottomSpacerLi {
				width: 1.5%; max-width: 16px; 
				background: #ccc;
				height: 100%; max-height: 37px;
				float: left; display: block;
				}
				img.navBottomImg {
					width: auto; 
					height:100%; max-height: 37px;				
					}					
	#textContainer {
		top: 19.2%; left: 27.18%;/*28.75%*/ bottom: 15%;
		width: 36.3%; max-width: 429px;
		height: auto; max-height: 426px;
		}
		img#text {
			width: 100%; max-width: 429px;
			height: auto; max-height: 426px;
			z-index: 10;
			font-style: italic; font-weight: 200; line-height: 22px; font-size: 119%; letter-spacing: -0.5px; text-align: left;	
			}
	#carouselWrap {
		width: 73%; height: 151px;
		top: 51.4%; left: 100%;
		}	
		#scrollingCarousel ul {
			width: 73%; height: 151px;
			margin: 0 1px 0 0; /*avoid overlapping*/
			}		
			#scrollingCarousel li {
				float:left; 
				margin:0 15px 0 0;
				height: 151px;
				width: auto;
				}
				img.carouselImage {
					width: 151px;
					height: 151px;
					}
	#carouselBigImgContainer {
		top: 7.8%;/*top:5.4%;*/ left: 43%; 
		/*min-width: 430px; max-width: 500px;
		min-height: 548px;*/
		z-index: 15;
		}
		img.bigImg {
			max-height: 548px;
			}
	#vergroessernText {
		width: 272px; height: 56px;
		left: 328px; top: 616px;
		position: absolute; z-index: 14;
	}
	#butContainer {
		position: absolute;
		z-index: 11;
		}
		a.butBeispiel {
			float: left;
			}
		img.imgBeispiel {
			width: 100%; max-width: 429px;
			height: auto; min-height: 2%;/*opera*/ max-height: 40px;
			}					
/* intro (index.html)                      -------------------------------------------------------------------------- */		
	img.introText {
		width: 100%; height: auto;
		z-index: 5;
		}		
	#centerImage {
		width: 100%; height: auto; z-index: 3;
		}	
	#centerImage2 {
		width: 100%; height: auto; z-index: 3;
		}
	.centerA {
		width: 48%; height: auto; min-height: 100%;
		display: block; 
		position: absolute;
		z-index: 10;
		left: 26%;
		}
	img#whiteLayover {	
		width: 100%; height: 100%;
		z-index: 2;
		}
	img#introAddress {
		width: 100%;
		height: auto;
		z-index: 3;
		}		
	#wrapperBg {	
		position: absolute; z-index:1;
		}
	#navLeft { /*only used for animation*/
		display: block;	
		position: absolute;
		left: -246px;
		z-index: 4;
		}			
/* leistungen.html                       ---------------------------------------------------------------------- */		
	img#leistungenMotiv {
		width: 38.05%; max-width: 457px; 
		height: auto; min-height: 52%;/*opera*/ max-height: 472px;
		position: absolute;
		right: 0; top: 19.2%; bottom: 15%;
		}		
		/* beratung.html                           ---------------------------------------------------------------------- */	
		img#beratungMotiv {
			width: 36%;/*38.05%*/ max-width: 474px; 
			height: auto; min-height: 52%;/*opera*/ max-height: 463px;
			position: absolute;
			right: 0; top: 19.2%; bottom: 15%;
			}	
		/* bildhauerarbeiten.html                           ------------------------------------------------------------- */
		img#bildhauerarbeitenMotiv {
			width: 36%;/*38.05%*/ max-width: 432px; 
			height: auto; min-height: 52%;/*opera*/ max-height: 533px;
			position: absolute;
			right: 0; top: 19.2%; bottom: 15%;
			}				
		/* gravierungen.html                       ---------------------------------------------------------------------- */				
		img#gravierungenMotiv {
			width: 36%;/*38.05%*/ max-width: 424px; 
			height: auto; min-height: 52%;/*opera*/ max-height: 569px;
			position: absolute;
			right: 0; top: 19.2%; bottom: 15%;
			}
		/* schriften.html                                   ------------------------------------------------------------- */				
		img#schriftenMotiv {
			width: 32%;/*38.05%*/ max-width: 328px; 
			height: auto; min-height: 36%;/*opera*/ max-height: 548px;
			position: absolute;
			right: 0; top: 19.2%; bottom: 15%;
			}		
		/* grabschmuck.html                                 ------------------------------------------------------------- */
		img#grabschmuckMotiv {
			width: 36%;/*38.05%*/ max-width: 424px; 
			height: auto; min-height: 36%;/*opera*/ max-height: 424px;
			position: absolute;
			right: 0; top: 19.2%; bottom: 15%;
			}			
		/* montage.html                           ---------------------------------------------------------------------- */	
		img#montageMotiv {
			width: 38.05%;/*38.05%*/ max-width: 447px; 
			height: auto; min-height: 52%;/*opera*/ max-height: 518px;
			position: absolute;
			right: 0; top: 19.2%; bottom: 15%;
			}		
		img#montageMotiv2 {
			width: 100%;/*38.05%*/ max-width: 728px; 
			height: auto; min-height: 45%;/*opera*/ max-height: 538px;
			position: absolute; z-index:3;
			left:26.3%; top: 19.2%; 
			}				
/* grabsteine.html                         ----------------------------------------------------------------------------- */			
		/* steine_hochformat.html                 ---------------------------------------------------------------------- */
		img#steineHochformatMotiv {
			width: 36%; max-width: 380px;
			height: auto; min-height: 55%;/*opera*/ max-height: 524px;
			right: 0; top: 19.2%; bottom: 15%;			
			}
		/* steine_querformat.html                 ---------------------------------------------------------------------- */
		img#steineQuerformatMotiv {
			width: 36%; max-width: 425px;
			height: auto; min-height: 36%;/*opera*/ max-height: 327px;
			right: 0; top: 19.2%; bottom: 15%;			
			}
		/* felsen.html                            ---------------------------------------------------------------------- */
		img#felsenMotiv {
			width: 36%; max-width: 409px;
			height: auto; min-height: 55%;/*opera*/ max-height: 481px;
			right: 0; top: 19.2%; bottom: 15%;			
			}	
		/* abdeckungen.html                       ---------------------------------------------------------------------- */
		img#abdeckungenMotiv {
			width: 36%; max-width: 389px;
			height: auto; min-height: 55%;/*opera*/ max-height: 545px;
			right: 0; top: 19.2%; bottom: 15%;			
			}		
		/* urnengraeber.html                      ---------------------------------------------------------------------- */
		img#urnengraeberMotiv {
			width: 36%; max-width: 434px;
			height: auto; min-height: 45%;/*opera*/ max-height: 424px;
			right: 0; top: 19.2%; bottom: 15%;			
			}	
		/* liegesteine.html                       ---------------------------------------------------------------------- */
		img#liegesteineMotiv {
			width: 36%; max-width: 447px;
			height: auto; min-height: 50%;/*opera*/ max-height: 518px;
			right: 0; top: 19.2%; bottom: 15%;			
			}				
/* unternehmen.html                       ---------------------------------------------------------------------- */						
	#unternehmenTextContainer {
		top: 19.2%; left: 27.18%;/*28.75%*/ bottom: 15%;
		width: 36.3%; max-width: 419px;
		height: auto; min-height: 612px; max-height: 666px;			
		}
		img#unternehmenText {
			width: 100%; max-width: 419px;
			height: auto; height: 565px;
			z-index: 10;
			font-style: italic; font-weight: 200; line-height: 22px; font-size: 119%; letter-spacing: -0.5px; text-align: left;	
			}
		img#unternehmenWeiter {
			width: 100%; max-width: 419px;
			bottom: 0;
			}
	#unternehmenPicsUl {
		width: 209px;
		height: 573px;
		right: 0;
		top: 19.2%;
		}
			img.unternehmenPic {
				width: 209px;
				height: 143px;
				}
	#unternehmenBigPicContainer {
		top: 19.2%; left: 27%;
		width: auto;
		height: auto;
		z-index: 11;
		}
		img#unternehmenBigPic {
			width: 100%; height: auto;
			}
/* impressum.html                         ---------------------------------------------------------------------- */	
	#kontaktTextLinksContainer {
		max-width: 373px; max-height: 859px;
		position: absolute; z-index:4;
		left: 246px;
		}
		.butKontaktTextLinks {
			float: left;
			width: auto; height: auto;
			max-width: 373px;
			}
	#kontaktTextRechts {
		max-width: 579px; max-height: 859px;
		position: absolute; right: 0; z-index: 4;
		}
	#wegskizze {
		width: 25.4%; height: auto;
		z-index: 5;
		top: 4.6%; right: 4.9%;
		}