@charset "utf-8";
/* CSS Document */
		* { margin: 0; padding: 0 }
		
		p { text-align: justify; margin: 0 50px 15px 0px }
		
		p, ul { font-size: 11px; line-height: 1.4em } 
		
		p a, li a { color: #666699; text-decoration: none }
		
		p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100% }
		
		p#cross-links { text-align: right; margin-right: 100px; }
		
		p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 5px; padding-bottom: 5px }
		
		noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left }
		noscript a { color: #a00; text-decoration: underline }
		noscript ol { margin-left: 25px; }
		
		a:focus { outline:none }
		
		img { border: 0 }
		
		h3 { margin-bottom: 5px; padding-bottom: 3px; text-align: left; text-indent: 0px; color: #FFFFFF; font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px }
		
		body {
			font-family: Verdana, Arial;
			background: #ffffff url(../bilderIndex/hinterGrauNavi.gif) repeat-x top;
			width: 100%;
			margin: 0px;
			padding: 0px;
			text-align: center;
			padding-bottom: 20px;
		}
		
/*//---------meine Sachen----------*/
#preload {
	display: none;
	}
#haupt {
	width: 860px;
	position: absolute;
	left: 50%;
	margin-left: -430px;
	}
/*----- neue Navi -------*/
#logo {
	position: absolute;
	height: 34px;
	width: 850px;
	top: 0px;
	left: 50%;
	margin-left: -425px;
	float: left;
	background-image: url(../bilderIndex/logo.gif);
	background-repeat: no-repeat;
	background-position: left;
	}
#navi {
	position: absolute;
	height: 34px;
	width: 850px;
	top: 0px;
	left: 50%;
	margin-left: -425px;
	z-index: 20000;
	float: left;
	text-align: left;
	}
#leiste {
	width: 100%;
	height: 34px;
	text-align: right;
	margin: 0px;
	padding: 0px;
	}
#navi a {
	text-decoration: none;
	display: inline-block;
	outline: none;
	width: 100px;
	height: 34px;
	margin: 0px;
	padding: 0px;
	text-align: center;
	}
#history {
	position: absolute;
	display: none;
	width: 100px;
	height: 68px;
	left: 450px;
	float: left;
	margin: 0px;
	padding: 0px;
	}	
#projekte {
	position: absolute;
	left: 550px;
	display: none;
	width: 100px;
	height: 170px;
	float: left;
	margin: 0px;
	padding: 0px;
	}
#design {
	position: absolute;
	display: none;
	width: 100px;
	height: 170px;
	left: 650px;
	float: left;
	margin: 0px;
	padding: 0px;
	}
/*---- Battons ----*/
#batHome {
	background-image: url(../battons/home1.gif);
	}
#batHome:hover {
	background-image: url(../battons/home2.gif);
	}
#batPortfolio {
	background-image: url(../battons/portfolio1.gif);
	}
#batPortfolio:hover {
	background-image: url(../battons/portfolio2.gif);
	}
#batProjekte {
	background-image: url(../battons/projekte1.gif);
	}
#batProjekte:hover {
	background-image: url(../battons/projekte2.gif);
	}
#batDesigns {
	background-image: url(../battons/design1.gif);
	}
#batDesigns:hover {
	background-image: url(../battons/design2.gif);
	}
#batKontakt {
	background-image: url(../battons/kontakt1.gif);
	}
#batKontakt:hover {
	background-image: url(../battons/kontakt2.gif);
	}
#batGeschichte {
	background-image: url(../battons/gesch1.gif);
	}
#batGeschichte:hover {
	background-image: url(../battons/gesch2.gif);
	}
#batVita {
	background-image: url(../battons/vita1.gif);
	}
#batVita:hover {
	background-image: url(../battons/vita2.gif);
	}
#batKI {
	background-image: url(../battons/innen1.gif);
	}
#batKI:hover {
	background-image: url(../battons/innen2.gif);
	}
#batAachen {
	background-image: url(../battons/aachen1.gif);
	}
#batAachen:hover {
	background-image: url(../battons/aachen2.gif);
	}
#batKB {
	background-image: url(../battons/brauns1.gif);
	}
#batKB:hover {
	background-image: url(../battons/brauns2.gif);
	}
#batRoden {
	background-image: url(../battons/roden1.gif);
	}
#batRoden:hover {
	background-image: url(../battons/roden2.gif);
	}
#batMoenchen {
	background-image: url(../battons/moenchen1.gif);
	}
#batMoenchen:hover {
	background-image: url(../battons/moenchen2.gif);
	}
#batBaeder {
	background-image: url(../battons/baeder1.gif);
	}
#batBaeder:hover {
	background-image: url(../battons/baeder2.gif);
	}
#batKamine {
	background-image: url(../battons/kam1.gif);
	}
#batKamine:hover {
	background-image: url(../battons/kam2.gif);
	}
#batGaerten {
	background-image: url(../battons/garten1.gif);
	}
#batGaerten:hover {
	background-image: url(../battons/garten2.gif);
	}
#batKuechen {
	background-image: url(../battons/kuechen1.gif);
	}
#batKuechen:hover {
	background-image: url(../battons/kuechen2.gif);
	}
#batPlast {
	background-image: url(../battons/plast1.gif);
	}
#batPlast:hover {
	background-image: url(../battons/plast2.gif);
	}
/*---- END Navi ----*/
#grau {
	position: absolute;
	left: 0px;
	top: 50px;
	width: 100%;
	height: 450px;
	background-image: url(../bilderProjekte/stein2.jpg);
	background-repeat: no-repeat;
	background-position: center;
	float: left;
	}
#copy p {
	text-align: center;
	font-size: 10px;
	}
#cross-links a {
	width: 50px;
	height: 50px;
	display: inline-block;
	background-color: #CCCCCC;
	}
a#link1 {
	background-image: url(../bilderProjekte/link1a.jpg);
	border: #FFFFFF solid 2px;
	}
a#link1:hover {
	background-image: url(../bilderProjekte/link1.jpg);
	border: #999999 solid 2px;
	}
a#link2 {
	background-image: url(../bilderProjekte/link2a.jpg);
	border: #FFFFFF solid 2px;
	}
a#link2:hover {
	background-image: url(../bilderProjekte/link2.jpg);
	border: #999999 solid 2px;
	}
a#link3 {
	background-image: url(../bilderProjekte/link3a.jpg);
	border: #FFFFFF solid 2px;
	}
a#link3:hover {
	background-image: url(../bilderProjekte/link3.jpg);
	border: #999999 solid 2px;
	}
a#link4 {
	background-image: url(../bilderProjekte/link4a.jpg);
	border: #FFFFFF solid 2px;
	}
a#link4:hover {
	background-image: url(../bilderProjekte/link4.jpg);
	border: #999999 solid 2px;
	}
a#link5 {
	background-image: url(../bilderProjekte/link5a.jpg);
	border: #FFFFFF solid 2px;
	}
a#link5:hover {
	background-image: url(../bilderProjekte/link5.jpg);
	border: #999999 solid 2px;
	}
/*---------TAB 1--------------*/
#pA1 a {
	display: block;
	width: 120px;
	height: 120px;
	background-image: url(../bilderProjekte/proArzt/IMG_9902a.jpg);
	}
#pA1 a:hover {
	background-image: url(../bilderProjekte/proArzt/IMG_9902.jpg);
	}
#pA2 a {
	display: block;
	width: 120px;
	height: 242px;
	background-image: url(../bilderProjekte/proArzt/IMG_0038a.jpg);
	}
#pA2 a:hover {
	background-image: url(../bilderProjekte/proArzt/IMG_0038.jpg);
	}
#pA3 a {
	display: block;
	width: 120px;
	height: 120px;
	background-image: url(../bilderProjekte/proArzt/IMG_0026.jpg);
	}
#pA3 a:hover {
	background-image: url(../bilderProjekte/proArzt/IMG_0026a.JPG);
	}
#pA4 a {
	display: block;
	width: 120px;
	height: 120px;
	background-image: url(../bilderProjekte/proArzt/IMG_9991.jpg);
	}
#pA4 a:hover {
	background-image: url(../bilderProjekte/proArzt/IMG_9991a.jpg);
	}
#pA5 a {
	display: block;
	width: 120px;
	height: 242px;
	background-image: url(../bilderProjekte/proArzt/IMG_9985.jpg);
	}
#pA5 a:hover {
	background-image: url(../bilderProjekte/proArzt/IMG_9985a.jpg);
	}
#pA6 a {
	display: block;
	width: 242px;
	height: 120px;
	background-image: url(../bilderProjekte/proArzt/IMG_0022a.jpg);
	}
#pA6 a:hover {
	background-image: url(../bilderProjekte/proArzt/IMG_0022.jpg);
	}
/*-------TAB 2-------*/
#pB1 a {
	display: block;
	width: 120px;
	height: 120px;
	background-image: url(../bilderProjekte/Gschwind/gschwind4.jpg);
	}
#pB1 a:hover {
	background-image: url(../bilderProjekte/Gschwind/gschwind4_a.jpg);
	}
#pB2 a {
	display: block;
	width: 242px;
	height: 120px;
	background-image: url(../bilderProjekte/Gschwind/gschwind2_a.jpg);
	}
#pB2 a:hover {
	background-image: url(../bilderProjekte/Gschwind/gschwind2.jpg);
	}
#pB3 a {
	display: block;
	width: 120px;
	height: 120px;
	background-image: url(../bilderProjekte/Gschwind/gschwind15.jpg);
	}
#pB3 a:hover {
	background-image: url(../bilderProjekte/Gschwind/gschwind15_a.jpg);
	}
#pB4 a {
	display: block;
	width: 120px;
	height: 120px;
	background-image: url(../bilderProjekte/Gschwind/dusche2.jpg);
	}
#pB4 a:hover {
	background-image: url(../bilderProjekte/Gschwind/dusche1.jpg);
	}
#pB5 a {
	display: block;
	width: 120px;
	height: 120px;
	background-image: url(../bilderProjekte/Gschwind/gschwind13.jpg);
	}
#pB5 a:hover {
	background-image: url(../bilderProjekte/Gschwind/gschwind13_a.jpg);
	}
#pB6 a {
	display: block;
	width: 242px;
	height: 120px;
	background-image: url(../bilderProjekte/Gschwind/gschwind12.jpg);
	}
#pB6 a:hover {
	background-image: url(../bilderProjekte/Gschwind/gschwind12_a.jpg);
	}
#pB7 a {
	display: block;
	width: 120px;
	height: 120px;
	background-image: url(../bilderProjekte/Gschwind/gschwind6_a.jpg);
	}
#pB7 a:hover {
	background-image: url(../bilderProjekte/Gschwind/gschwind6.jpg);
	}
/*-------TAB 3-------*/
#pC1 a {
	display: block;
	width: 120px;
	height: 242px;
	background-image: url(../bilderProjekte/Baethe/zen1.jpg);
	}
#pC1 a:hover {
	background-image: url(../bilderProjekte/Baethe/zen1_a.jpg);
	}
#pC2 a {
	display: block;
	width: 120px;
	height: 120px;
	background-image: url(../bilderProjekte/Baethe/zen6.jpg);
	}
#pC2 a:hover {
	background-image: url(../bilderProjekte/Baethe/zen6_a.jpg);
	}
#pC3 a {
	display: block;
	width: 120px;
	height: 242px;
	background-image: url(../bilderProjekte/Baethe/zen11_a.jpg);
	}
#pC3 a:hover {
	background-image: url(../bilderProjekte/Baethe/zen11.jpg);
	}
#pC4 a {
	display: block;
	width: 120px;
	height: 242px;
	background-image: url(../bilderProjekte/Baethe/dusche.jpg);
	}
#pC4 a:hover {
	background-image: url(../bilderProjekte/Baethe/dusche2.jpg);
	}
#pC5 a {
	display: block;
	width: 120px;
	height: 120px;
	background-image: url(../bilderProjekte/Baethe/b3b.jpg);
	}
#pC5 a:hover {
	background-image: url(../bilderProjekte/Baethe/b3a.jpg);
	}
#pC6 a {
	display: block;
	width: 120px;
	height: 120px;
	background-image: url(../bilderProjekte/Baethe/badNeu.jpg);
	}
#pC6 a:hover {
	background-image: url(../bilderProjekte/Baethe/badNeu2.jpg);
	}
/*-------TAB 4-------*/
#pD1 a {
	display: block;
	width: 120px;
	height: 242px;
	background-image: url(../bilderProjekte/Dorandt/kamin1a.jpg);
	}
#pD1 a:hover {
	background-image: url(../bilderProjekte/Dorandt/kamin1b.jpg);
	}
#pD2 a {
	display: block;
	width: 242px;
	height: 120px;
	background-image: url(../bilderProjekte/Dorandt/boden1b.jpg);
	}
#pD2 a:hover {
	background-image: url(../bilderProjekte/Dorandt/boden1a.jpg);
	}
#pD3 a {
	display: block;
	width: 120px;
	height: 120px;
	background-image: url(../bilderProjekte/Dorandt/kueche2b.jpg);
	}
#pD3 a:hover {
	background-image: url(../bilderProjekte/Dorandt/kueche2a.jpg);
	}
#pD4 a {
	display: block;
	width: 120px;
	height: 242px;
	background-image: url(../bilderProjekte/Dorandt/boden2a.jpg);
	}
#pD4 a:hover {
	background-image: url(../bilderProjekte/Dorandt/boden2b.jpg);
	}
#pD5 a {
	display: block;
	width: 120px;
	height: 120px;
	background-image: url(../bilderProjekte/Dorandt/bad23b.jpg);
	}
#pD5 a:hover {
	background-image: url(../bilderProjekte/Dorandt/bad23a.jpg);
	}
#pD6 a {
	display: block;
	width: 120px;
	height: 120px;
	background-image: url(../bilderProjekte/Dorandt/bad24a.jpg);
	}
#pD6 a:hover {
	background-image: url(../bilderProjekte/Dorandt/bad24b.jpg);
	}
/*-------TAB 5-------*/
#pE1 a {
	display: block;
	width: 120px;
	height: 120px;
	background-image: url(../bilderProjekte/moenchenGlad/bad29b.jpg);
	}
#pE1 a:hover {
	background-image: url(../bilderProjekte/moenchenGlad/bad29a.jpg);
	}
#pE2 a {
	display: block;
	width: 120px;
	height: 120px;
	background-image: url(../bilderProjekte/moenchenGlad/tual1b.jpg);
	}
#pE2 a:hover {
	background-image: url(../bilderProjekte/moenchenGlad/tual1a.jpg);
	}
#pE3 a {
	display: block;
	width: 120px;
	height: 242px;
	background-image: url(../bilderProjekte/moenchenGlad/bad31a.jpg);
	}
#pE3 a:hover {
	background-image: url(../bilderProjekte/moenchenGlad/bad31b.jpg);
	}
#pE4 a {
	display: block;
	width: 120px;
	height: 242px;
	background-image: url(../bilderProjekte/moenchenGlad/dusche30a.jpg);
	}
#pE4 a:hover {
	background-image: url(../bilderProjekte/moenchenGlad/dusche30b.jpg);
	}
#pE5 a {
	display: block;
	width: 120px;
	height: 120px;
	background-image: url(../bilderProjekte/moenchenGlad/treppeMb.jpg);
	}
#pE5 a:hover {
	background-image: url(../bilderProjekte/moenchenGlad/treppeMa.jpg);
	}
#pE6 a {
	display: block;
	width: 120px;
	height: 120px;
	background-image: url(../bilderProjekte/moenchenGlad/tual2b.jpg);
	}
#pE6 a:hover {
	background-image: url(../bilderProjekte/moenchenGlad/tual2a.jpg);
	}
#pE7 a {
	display: block;
	width: 120px;
	height: 120px;
	background-image: url(../bilderProjekte/moenchenGlad/kueche9b.jpg);
	}
#pE7 a:hover {
	background-image: url(../bilderProjekte/moenchenGlad/kueche9a.jpg);
	}
	
/*//---------Ende meiner Sachen----------*/	

	
		.stripViewer .panelContainer .panel ul {
			text-align: left;
			margin: 0 15px 0 30px;
		}
		
		.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
			margin: 50px 0 20px 0;
			position: relative;
			width: 100%;
		}

		/* These 2 lines specify style applied while slider is loading */
		.csw {width: 100%; height: 425px; background: #fff; overflow: scroll}
		.csw .loading {margin: 200px 0 300px 0; text-align: center}

		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
		/*	border: 5px solid #000;  this is the border. should have the same value for the links */
			margin: auto;
			width: 780px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 425px;
			clear: both;
		/*	background: #fff;*/
		}
		
		.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			left: 0; top: 0;
			width: 100%;
			list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
		}
		
		.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 780px; /* Also specified in  .stripViewer  above */
		}
		
		.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			padding: 10px;
		}
		
		.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
			margin: auto;
		}
		
		.stripNav ul { /* The auto-generated set of links */
			list-style: none;
		}
		
		.stripNav ul li {
			float: left;
			margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
		}
		
		.stripNav a { /* The nav links */
			font-size: 10px;
			font-weight: bold;
			text-align: center;
			line-height: 32px;
			background: #c6e3ff;
			color: #fff;
			text-decoration: none;
			display: none;
			padding: 0 15px;
		}
		
		.stripNav li.tab1 a { background: #60f }
		.stripNav li.tab2 a { background: #60c }
		.stripNav li.tab3 a { background: #63f }
		.stripNav li.tab4 a { background: #63c }
		.stripNav li.tab5 a { background: #00e }
		
		.stripNav li a:hover {
			background: #333;
		}
		
		.stripNav li a.current {
			background: #000;
			color: #fff;
		}
		
		.stripNavL, .stripNavR { /* The left and right arrows */
			position: absolute;
			top: 200px;
			text-indent: -9000em;
		}
		
		.stripNavL a, .stripNavR a {
			display: block;
			height: 40px;
			width: 40px;
		}
		
		.stripNavL {
			left: 0;
		}
		
		.stripNavR {
			right: 0;
		}
		
		.stripNavL {
			background: url(../images/arrow-left.gif) no-repeat center;
		}
		
		.stripNavR {
			background: url(../images/arrow-right.gif) no-repeat center;
		}
		
/*----BILDER----*/
.bilder {
	float: left;
	background-color: #FFFFFF;
	margin: 0px auto;
	margin-right: 75px;
	padding: 0px;
	width: 366px;
	height: 366px;
	border: #FFFFFF solid 1px;	
	}