/* Global Styles */

* {
	margin:0;
	padding:0;
}
html, body {
	height: 100%;
}

body {
	background: url(../bilder/hintergrund.jpg) repeat fixed center center;
	-webkit-background-size: cover; /* Safari, Chrome */
	-moz-background-size: cover;  /* Firefox */
	-o-background-size: cover; 
	background-size: cover;
}

div {
	color: #797979;
	font: 12px/18px "Lucida Grande", Lucida, Verdana, sans-serif;
	text-align: left;
}


/* ID Styles */

#wrappertop { 
	position: absolute;
	top: 0; 
	left: 50%; 
	width: 1008px;
	min-height:100%;
	height: auto !important;
	height:100%;
	margin-left: -504px;
	background-color: transparent;
}

#inhalt_all { 
	position: absolute;
	top: 0; 
	left: 50%; 
	width: 988px;
	min-height:100%;
	height: auto !important;
	height:100%;
	margin-left: -494px;
	margin-bottom:-25px; /* - height of footer */
	overflow: hidden !important; /* FF Scroll-leiste */ 
}

#header {
	height: 96px;	 
	background-color: #fefc78;
	
}

#farbbox_transparent { 
	position: absolute; 
	top: 96px;
	left: 190px;
	width: 783px;
	background-color: #FFFFFF;
	opacity:0.8;
	filter:alpha(opacity=80);
	color: white;
	height: 100%;
}

#bildbox_1 {
	position: absolute; 
	top: 64px;
	left: 488px;
	height: 100px;	 
	width: 500px;
}

#inhaltbox {
	position: absolute; 
	top: 250px;
	left: 496px; 
	height: 200px;	 
	width: 400px;
	padding-bottom:80px;   /* Height of the footer element */
}

#footer {
	position:absolute;
	left: 190px;
	width: 777px;
	height:24px;
	bottom:0;
	background-color: #FFFFFF;
	opacity:0.5;
	filter:alpha(opacity=50);
	font: 9px/12px "Lucida Grande", Lucida, Verdana, sans-serif;
	text-align: right;
	padding-left: 0;
	padding-top: 6px;
	padding-right: 6px;
}
	
/* Class Styles */

.titel {
	color: #333333;
	font: bold 18px/24px "Lucida Grande", Lucida, Verdana, sans-serif;
}

.untertitel {
	color: #333333;
	font: 14px/24px "Lucida Grande", Lucida, Verdana, sans-serif;
}

.gs {
	color: #333333;
	font: 12px/18px "Lucida Grande", Lucida, Verdana, sans-serif;
	text-align: left;
}

.transparent {
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
  }


/* Navigation */

/* Navigation VERTIKAKL --------------------------------------------*/

#navibox {
	position: absolute; 
	top: 330px;
	left: 0px; 
	height: 186px;
	width: 180px;
}

#navi_vertikal { /* ul wird mit dieser ID benannt */

	margin: 0;
	padding: 0;
	list-style-type: none;
	text-decoration: none;
}

#navi1_vertikal { /* li (erste Linie) wird mit dieser ID benannt */
	border-top: 1px solid #990000;
	background-color: #deb1a7;
}
#navi2_vertikal { /* li (die nächsten) werden mit dieser ID benannt */
	background-color: #deb1a7;
}


#navibox li {
	border-bottom: 1px solid #990000;
	height: 31px;
	font: 12px/18px "Lucida Grande", Lucida, Verdana, sans-serif;
	text-align: left;
	line-height: 31px;
	text-decoration: none;
	padding-left: 10px;
}

a.info:link { 
	color: #941100;
	text-decoration: none;
	display: block;
}
a.info:visited { 
	color: #941100;
	text-decoration: none; 
	}

a.info:hover { 
	color: #FFFFFF;
	text-decoration: none;
	text-align: left;
}

a.info:active { 
	color: #941100;
	text-decoration: none;
	}

/* link für den Footer */

a.linkto:link { 
	color: #333333;
	text-decoration: none;
}
a.linkto:visited { 
	color: #333333;
	text-decoration: none; 
	}

a.linkto:hover { 
	color: #d72041;
	text-decoration: none;
}

a.linkto:active { 
	color: #333333;
	text-decoration: none;
	}

/* Galerie */
/* The containing box for the gallery. */
#container { 
	position:absolute; width:806px; height:396px; auto 0 auto; background:url(../bilder/galerie/villette.jpg) 306px 0px no-repeat; background-size:500px;
	left: 202px;
	top: 60px;
}

/* Removing the list bullets and indentation - add size - and position */
#container ul {width:198px; height:100%;  margin:0; list-style-type:none; float:left;
	padding: 250px 0 0;
	top: 250px;
}

#container li {float:left;}

/* Remove the bilder/galerie and text from sight */
#container a.gallery span {position:absolute; width:1px; height:1px; top:50px; left:5px; overflow:hidden; background: #fff;}

/* Adding the thumbnail bilder/galerie */
#container a.gallery, #container a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; margin:0px 4px 4px 0px; text-align:left; cursor:default;}
#container a.slidea {background: url(../bilder/galerie/p1_t.jpg) no-repeat; background-size:60px; height:93px; width:60px;}
#container a.slideb {background:url(../bilder/galerie/p2_t.jpg); background-size:60px; background-repeat:no-repeat; height:93px; width:60px;}
#container a.slidec {background:url(../bilder/galerie/p3_t.jpg); background-size:60px; background-repeat:no-repeat; height:93px; width:60px;}

#container a.slided {background:url(../bilder/galerie/p4_t.jpg); background-size:93px; background-repeat:no-repeat; height:60px; width:93px;}
#container a.slidee {background:url(../bilder/galerie/p5_t.jpg); background-size:93px; background-repeat:no-repeat; height:60px; width:93px;}

#container a.slidef {background:url(../bilder/galerie/p6_t.jpg); background-size:93px; background-repeat:no-repeat; height:60px; width:93px;}
#container a.slideg {background:url(../bilder/galerie/p7_t.jpg); background-size:93px; background-repeat:no-repeat; height:60px; width:93px;}

#container a.slideh {background:url(../bilder/galerie/p8_t.jpg); background-size:60px; background-repeat:no-repeat; height:93px; width:60px;}
#container a.slidei {background:url(../bilder/galerie/p9_t.jpg); background-size:60px; background-repeat:no-repeat; height:93px; width:60px;}
#container a.slidej {background:url(../bilder/galerie/p10_t.jpg); background-size:60px; background-repeat:no-repeat; height:93px; width:60px;}

#container a.slidek {background:url(../bilder/galerie/p11_t.jpg); background-size:93px; background-repeat:no-repeat; height:60px; width:93px;}
#container a.slidel {background:url(../bilder/galerie/p12_t.jpg); background-size:93px; background-repeat:no-repeat; height:60px; width:93px;}

/* styling the hovers */
/* #container a.gallery:hover {border:1px solid #fff;} */
#container a.gallery:hover span {position:absolute; width:500px; height:auto; top:0; left:306px; color:#000; background:#fff;}
#container a.gallery:hover img {float:left; width:500px}
/* #container a.slideb:hover img, #container a.slidei:hover img {float:right;} */


/* Bilder in einer Box mit float platzieren */

#atelier { 
	position: absolute; 
	height: 600px;	 
	width: 600px;
	top: 48px;
	left: 468px;
	border-style: none;
}

#atelier ul {
	width:520px; 
	height:100%;
	list-style-type:none; 
	float:left;
}

#atelier li {
	float:left;
	margin-right:10px;
	margin-bottom:6px; 
}