@charset "utf-8";

/*

Extra-Stylesheet für die Bildernavigation

*/

/* Navigation der Startseite */

#picnav {
	width: 480px;
	height: 360px;
	margin-top: 3em;
	margin-left: 42%;
	margin-right: 20%;
}
#picnav-col-1 {
	float: left;
	width: 360px;
	height: 360px;
}
	#picnav-1 {
		float: left;
		display: block;
		width: 120px;
		height: 240px;
		background: url("bilder/nav_1.jpg") 0 0 no-repeat;
	}
		#picnav-1:hover,
		#picnav-1:active {
			background-position: -120px 0;
		}
	
	#picnav-2 {
		float: right;
		display: block;
		width: 240px;
		height: 240px;
		background: url("bilder/nav_2.jpg") 0 0 no-repeat;
	}
		#picnav-2:hover,
		#picnav-2:active {
			background-position: -240px 0;
		}

	#picnav-3 {
		float: left;
		display: block;
		width: 240px;
		height: 120px;
		background: url("bilder/nav_3.jpg") 0 0 no-repeat;
	}
		#picnav-3:hover,
		#picnav-3:active {
			background-position: -240px 0;
		}

	#picnav-4 {
		float: right;
		display: block;
		width: 120px;
		height: 120px;
		background: url("bilder/nav_4.jpg") 0 0 no-repeat;
	}
		#picnav-4:hover,
		#picnav-4:active {
			background-position: -120px 0;
		}

#picnav-col-2 {
	float: right;
	width: 120px;
	height: 360px;
}

	#picnav-5 {
		display: block;
		width: 120px;
		height: 120px;
		background: url("bilder/nav_5.jpg") 0 0 no-repeat;
	}
		#picnav-5:hover,
		#picnav-5:active {
			background-position: -120px 0;
		}

	#picnav-6 {
		display: block;
		width: 120px;
		height: 240px;
		background: url("bilder/nav_6.jpg") 0 0 no-repeat;
	}
		#picnav-6:hover,
		#picnav-6:active {
			background-position: -120px 0;
		}

/* Gallerie "Menschen" (Die Bilder sprechen für sich)*/

#menschen {
	width: 480px;
	height: 360px;
	margin-top: 3em;
	margin-left: 42%;
	margin-right: 20%;
}

#menschen-col-1 {
	float: left;
	width: 360px;
	height: 360px;
}
	#menschen-1 {
		float: left;
		display: block;
		width: 120px;
		height: 240px;
		background: url("bilder/menschen_1.jpg") 0 0 no-repeat;
	}
		#menschen-1:hover,
		#menschen-1:active {
			background-position: -120px 0;
		}
	#menschen-2 {
		float: right;
		display: block;
		width: 240px;
		height: 240px;
		background: url("bilder/menschen_2.jpg") 0 0 no-repeat;
	}
		#menschen-2:hover,
		#menschen-2:active {
			background-position: -240px 0;
		}
	#menschen-3 {
		float: left;
		display: block;
		width: 240px;
		height: 120px;
		background: url("bilder/menschen_3.jpg") 0 0 no-repeat;
	}
		#menschen-3:hover,
		#menschen-3:active {
			background-position: -240px 0;
		}
	#menschen-4 {
		float: right;
		display: block;
		width: 120px;
		height: 120px;
		background: url("bilder/menschen_4.jpg") 0 0 no-repeat;
	}
		#menschen-4:hover,
		#menschen-4:active {
			background-position: -120px 0;
		}

#menschen-col-2 {
	float: right;
	width: 120px;
	height: 360px;
}
	#menschen-5 {
		display: block;
		width: 120px;
		height: 120px;
		background: url("bilder/menschen_5.jpg") 0 0 no-repeat;
	}
		#menschen-5:hover,
		#menschen-5:active {
			background-position: -120px 0;
		}
	#menschen-6 {
		display: block;
		width: 120px;
		height: 240px;
		background: url("bilder/menschen_6.jpg") 0 0 no-repeat;
	}
		#menschen-6:hover,
		#menschen-6:active {
			background-position: -120px 0;
		}