/* CSS Document */

/*----------------- Referenzen / Galerie   ------------------------*/

/*###########################  Galerie  #####################*/

#galerieNav {
	background-color: #fff;
	position: relative;
	top: 15px;
	left: 0px;
	width: 338px;
	height: 20px;
} /*Positionierung der Galerie in der rechten Box*/

#galerieNav ul {
	background: #fff;
	padding: 0;
	margin: 0;
}

#galerieNav li {
	background-color: #fff;
	padding: 0;
	margin: 18px 18px 0px 0px;
	list-style: none;
	width: 40px;
	height: 40px;
}
   
#galerieNav ul li { 
	float: left;
}

#galerieNav li a {
	text-decoration: none;
	display: block;
	padding: 5px;
	/*margin: 1px 0 0;*/
	width: 40px;
	height: 40px;
	cursor: pointer;
}

/*++++++++++++++  Galerie Link Logo / Button Einbindung  / Anfang +++++++++++++*/

#galerieNav a:link#logo1, #galerieNav a:visited#logo1 {
	padding: 5px;
	border: 1px solid #E3E5E9;
	background: url(images/logos/serke_mediendesign1.jpg) no-repeat center;
	width: 40px;
	height: 40px;
}

#galerieNav a:hover#logo1, #galerieNav a:focus#logo1 {
	padding: 5px;
	border: 1px solid #b2b7c4;
	display: block;
	background: url(images/logos/serke_mediendesign2.jpg) no-repeat center;
}

/*++++++++++++++++*/

#galerieNav a:link#logo2, #galerieNav a:visited#logo2 {
	padding: 5px;
	border: 1px solid #E3E5E9;
	background: url(images/logos/serke_mediendesign1.jpg) no-repeat center;
	width: 40px;
	height: 40px;
}

#galerieNav a:hover#logo2, #galerieNav a:focus#logo2 {
	padding: 5px;
	border: 1px solid #b2b7c4;
	display: block;
	background: url(images/logos/serke_mediendesign2.jpg) no-repeat center;
}

/*++++++++++++++++*/

#galerieNav a:link#logo3, #galerieNav a:visited#logo3 {
	padding: 5px;
	border: 1px solid #E3E5E9;
	background:url(images/logos/serke_mediendesign1.jpg) no-repeat center;
	width: 40px;
	height: 40px;
}

#galerieNav a:hover#logo3, #galerieNav a:focus#logo3 {
	padding: 5px;
	border: 1px solid #b2b7c4;
	display: block;
	background: url(images/logos/serke_mediendesign2.jpg) no-repeat center;
}

/*++++++++++++++++*/

#galerieNav a:link#logo4, #galerieNav a:visited#logo4 {
	padding: 5px;
	border: 1px solid #E3E5E9;
	background: url(images/logos/serke_mediendesign1.jpg) no-repeat center;
	width: 40px;
	height: 40px;
}

#galerieNav a:hover#logo4, #galerieNav a:focus#logo4 {
	padding: 5px;
	border: 1px solid #b2b7c4;
	display: block;
	background: url(images/logos/serke_mediendesign2.jpg) no-repeat center;
}

/*++++++++++++++++*/

#galerieNav a:link#logo5, #galerieNav a:visited#logo5 {
	padding: 5px;
	border: 1px solid #E3E5E9;
	background: url(images/logos/serke_mediendesign1.jpg) no-repeat center;
	width: 40px;
	height: 40px;
}

#galerieNav a:hover#logo5, #galerieNav a:focus#logo5 {
	padding: 5px;
	border: 1px solid #b2b7c4;
	display: block;
	background: url(images/logos/serke_mediendesign2.jpg) no-repeat center;
}

/*++++++++++++++++*/

#galerieNav a:link#logo6, #galerieNav a:visited#logo6 {
	padding: 5px;
	border: 1px solid #E3E5E9;
	background: url(images/logos/serke_mediendesign1.jpg) no-repeat center;
	width: 40px;
	height: 40px;
}

#galerieNav a:hover#logo6, #galerieNav a:focus#logo6 {
	padding: 5px;
	border: 1px solid #b2b7c4;
	display: block;
	background: url(images/logos/serke_mediendesign2.jpg) no-repeat center;
}

/*++++++++++++++++*/

#galerieNav a:link#logo7, #galerieNav a:visited#logo7 {
	padding: 5px;
	border: 1px solid #E3E5E9;
	background: url(images/logos/serke_mediendesign1.jpg) no-repeat center;
	width: 40px;
	height: 40px;
}

#galerieNav a:hover#logo7, #galerieNav a:focus#logo7 {
	padding: 5px;
	border: 1px solid #b2b7c4;
	display: block;
	background: url(images/logos/serke_mediendesign2.jpg) no-repeat center;
}

/*++++++++++++++++*/

#galerieNav a:link#logo8, #galerieNav a:visited#logo8 {
	padding: 5px;
	border: 1px solid #E3E5E9;
	background: url(images/logos/serke_mediendesign1.jpg) no-repeat center;
	width: 40px;
	height: 40px;
}

#galerieNav a:hover#logo8, #galerieNav a:focus#logo8 {
	padding: 5px;
	border: 1px solid #b2b7c4;
	display: block;
	background: url(images/logos/serke_mediendesign2.jpg) no-repeat center;
}

/*++++++++++++++  Galerie Link Logo / Button Einbindung  / Ende +++++++++++++*/

#galerieNav a:link span, #galerieNav a:visited span {
	display: none;
	list-style: none;
	background: #fff;
}

#galerieNav a:hover span, #galerieNav a:focus span {
	display: block;
	list-style: none;
	background: #fff;
}

/*++++++++++++++++++++++   Referenzen Inhalt / PopUp  +++++++++++++++++++*/   
/*++++++++++++++++++  Referenz 1   ++++++++++++++++++++*/

span#bild1 {
	width: 200px; 
	height: 150px;
	background:#fff;
	/*margin-right:20px;*/
	margin-top: -165px;
	margin-left: -6px;
	overflow: hidden;
	float: left;
}
   
span#text1 {
	width: 134px;
	height: 150px;
	background:#fff;
	/*margin-left:198px;*/
	margin-left: 194px;
	margin-top: -165px;
	padding-left: 10px;
	font: 11px/16px Verdana, Arial, Helvetica, Sans-Serif; /*explizite Wiederholung der Textformatierung, um die Vererbung des vorangehenden "a" aufzuheben*/
	color: #626774;
	text-align: left;
	vertical-align: top;
}

/*++++++++++++++++++  Referenz 2   ++++++++++++++++++++*/

span#bild2 {
	width: 200px;
	height: 150px;
	background:#fff;
	/*margin-right:20px;*/
	margin-top: -165px;
	margin-left: -64px;
	overflow: hidden;
	float: left;
}
   
span#text2 {
	width: 134px;
	height: 150px;
	background:#fff;
	background-position:right;
	/*margin-left:198px;*/
	margin-left: 136px;
	margin-top: -165px;
	padding-left: 10px;
	font: 11px/16px Verdana, Arial, Helvetica, Sans-Serif; /*explizite Wiederholung der Textformatierung, um die Vererbung des vorangehenden "a" aufzuheben*/
	color: #626774;
	text-align: left;
	vertical-align: top;
}

/*++++++++++++++++++  Referenz 3   ++++++++++++++++++++*/

span#bild3 {
	width: 200px;
	height: 150px;
	background:#fff;
	/*margin-right:20px;*/
	margin-top: -165px;
	margin-left: -122px;
	overflow: hidden;
	float: left;
}
   
span#text3 {
	width: 134px;
	height: 150px;
	background:#fff;
	/*margin-left:198px;*/
	margin-left: 78px;
	margin-top: -165px;
	padding-left: 10px;
	font: 11px/16px Verdana, Arial, Helvetica, Sans-Serif; /*explizite Wiederholung der Textformatierung, um die Vererbung des vorangehenden "a" aufzuheben*/
	color: #626774;
	text-align: left;
	vertical-align: top;
}

/*++++++++++++++++++  Referenz 4   ++++++++++++++++++++*/

span#bild4 {
	width: 200px;
	height: 150px;
	background:#fff;
	/*margin-right:20px;*/
	margin-top: -165px;
	margin-left: -180px;/*um den Wert der Breite der Box und den Abstand zur nächsten Box erhöhen. Aktuell 58px.*/
	overflow: hidden;
	float: left;
}
   
span#text4 {
	width: 134px;
	height: 150px;
	background:#fff;
	/*margin-left:198px;*/
	margin-left: 20px;
	margin-top: -165px;
	padding-left: 10px;
	font: 11px/16px Verdana, Arial, Helvetica, Sans-Serif; /*explizite Wiederholung der Textformatierung, um die Vererbung des vorangehenden "a" aufzuheben*/
	color: #626774;
	text-align: left;
	vertical-align: top;
}

/*++++++++++++++++++  Referenz 5   ++++++++++++++++++++*/

span#bild5 {
	width: 200px;
	height: 150px;
	background:#fff;
	/*margin-right:20px;*/
	margin-top: -165px;
	margin-left: -238px;/*um den Wert der Breite der Box und den Abstand zur nächsten Box erhöhen. Aktuell 58px.*/
	overflow: hidden;
	float: left;
}
   
span#text5 {
	width: 134px;
	height: 150px;
	background:#fff;
	margin-left: -38px;
	margin-top: -165px;
	padding-left: 10px;
	font: 11px/16px Verdana, Arial, Helvetica, Sans-Serif; /*explizite Wiederholung der Textformatierung, um die Vererbung des vorangehenden "a" aufzuheben*/
	color: #626774;
	text-align: left;
	vertical-align: top;
}

/*++++++++++++++++++  Referenz 6   ++++++++++++++++++++*/

span#bild6 {
	width: 200px;
	height: 150px;
	background:#fff;
	/*margin-right:20px;*/
	margin-top: -223px;
	margin-left: -6px;
	overflow: hidden;
	float: left;
}

span#text6 {
	width: 134px;
	height: 150px;
	background:#fff;
	/*margin-left:198px;*/
	margin-left: 194px;
	margin-top: -223px;
	padding-left: 10px;
	font: 11px/16px Verdana, Arial, Helvetica, Sans-Serif; /*explizite Wiederholung der Textformatierung, um die Vererbung des vorangehenden "a" aufzuheben*/
	color: #626774;
	text-align: left;
	vertical-align: top;
}
/*++++++++++++++++++  Referenz 7  ++++++++++++++++++++*/

span#bild7 {
	width: 200px;
	height: 150px;
	background:#fff;
	/*margin-right:20px;*/
	margin-top: -223px;
	margin-left: -64px;
	overflow: hidden;
	float: left;
}
   
span#text7 {
	width: 134px;
	height: 150px;
	background:#fff;
	/*margin-left:198px;*/
	margin-left: 136px;
	margin-top: -223px;
	padding-left: 10px;
	font: 11px/16px Verdana, Arial, Helvetica, Sans-Serif; /*explizite Wiederholung der Textformatierung, um die Vererbung des vorangehenden "a" aufzuheben*/
	color: #626774;
	text-align: left;
	vertical-align: top;
}

/*++++++++++++++++++  Referenz 8   ++++++++++++++++++++*/

span#bild8 {
	width: 200px;
	height: 150px;
	background: #fff;
	/*margin-right:20px;*/
	margin-top: -223px;
	margin-left: -122px;
	overflow: hidden;
	float: left;
}
   
span#text8 {
	width: 134px;
	height: 150px;
	background: #fff;
	/*margin-left:198px;*/
	margin-left: 78px;
	margin-top: -223px;
	padding-left: 10px;
	font: 11px/16px Verdana, Arial, Helvetica, Sans-Serif; /*explizite Wiederholung der Textformatierung, um die Vererbung des vorangehenden "a" aufzuheben*/
	color: #626774;
	text-align: left;
	vertical-align: top;
}

/*+++++++++++++++++++++++++  Galerie / Referenz-Bild-Position   ++++++++++++++++++*/

#galerieNav ul li img {
	width: 180px;
	height: 130px;
	background: #fff;
	border: none;
	/*border:solid 1px #b2b7c4;*/
	padding: 10px;
	background: #E3E5E9;
}
 
/*###########################  Galerie / Ende  #####################*/