/* ==== article defaults ====================================================== */

.article { position: absolute; }

	.article p {
		width: 205px;
		margin: 70px 0 0 100px;
	}
		
	.article .weiterlesen {
		display: inline-block;
		height: 66px;
		margin: 20px 0 0 220px;

		background: url(../img/icn-weiterlesen.png) no-repeat left top;
		padding: 0 0 0 80px;
	}
	
		.article .weiterlesen span { display: none; }
		
			.article .weiterlesen:hover { background-position: left bottom; }

			.article .weiterlesen:hover span { display: inline-block; }
	
	#left .article { left: 100px; }

	#right .article { left: 60px; }
	
	.scroll li {
		position: absolute;
		width: 30px;
		height: 18px;	
		cursor: pointer;
	}
	
		.scroll .up { background: transparent url(../img/icn-scroll-up.png) no-repeat center top; }
		.scroll .down { background: transparent url(../img/icn-scroll-down.png) no-repeat  center top; }

			.scroll .up:hover { background-position: center bottom; }
			.scroll .down:hover { background-position: center bottom; }
	
		.scroll li span { display: none; }






/* ==== default background & topic headline ====================================================== */

.background {	
	background: #723e85; /* Old browsers */
	background: -moz-linear-gradient(left, #723e85 0%, #8193bf 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#723e85), color-stop(100%,#8193bf)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #723e85 0%,#8193bf 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #723e85 0%,#8193bf 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #723e85 0%,#8193bf 100%); /* IE10+ */
	background: linear-gradient(left, #723e85 0%,#8193bf 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#723e85', endColorstr='#8193bf',GradientType=1 ); /* IE6-9 */
}



.background-inverse {	
	background: #8193bf; /* Old browsers */
	background: -moz-linear-gradient(left, #8193bf 0%, #723e85 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#8193bf), color-stop(100%,#723e85)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #8193bf 0%,#723e85 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #8193bf 0%,#723e85 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #8193bf 0%,#723e85 100%); /* IE10+ */
	background: linear-gradient(left, #8193bf 0%,#723e85 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8193bf', endColorstr='#723e85',GradientType=1 ); /* IE6-9 */
}
	

	
	/* transparent headlines on top of background gradients */
	.bg-headline {
		display: inline-block;
		padding: 40px 0 0 30px;
		
		font: normal 125px/100% 'UbuntuCondensedRegular', Helvetica, Arial, sans-serif;     
		text-transform: uppercase;
		letter-spacing: -1px;
		
		color: #000;
		opacity: .1;
		filter: alpha(opacity=10);	
	}
	
	
	
	/* layer setup */
	.layer { position: absolute; }

	
	
	
	
/* ==== per article ====================================================== */

#bg-start-1 { filter: none; background: url(../assets/start/img/bg-start-baum.jpg) no-repeat; }
#bg-start-2 { filter: none; background: url(../assets/start/img/bg-start-nuss.jpg) no-repeat; }
#bg-start-3 { filter: none; background: url(../assets/start/img/bg-start-wurzel.jpg) no-repeat; }
#bg-start-4 { filter: none; background: url(../assets/start/img/bg-start-toast.jpg) no-repeat; }
#bg-start-5 { filter: none; background: url(../assets/start/img/bg-start-inseln.jpg) no-repeat; }
#bg-start-6 { filter: none; background: url(../assets/start/img/bg-start-eiswuerfel.jpg) no-repeat; }


#start .article { top: 40px; }

	#start h1 { color: #b3d9f2; }

	#start h2 { font-size: 13px; }

	#start .scrollen-staunen {
		display: inline-block;
		width: 198px;
		padding-top: 260px;
		margin: 5px 0 0 575px;
		
		background: url(../img/icn-start-scroll.png) no-repeat center left;
		text-align: center;
	}

		#start .scrollen-staunen:hover { background-position: center right; }



#bg-radiologie,
#radiologie,
#radiologie-empty { height: 760px; }

	#bg-radiologie { filter: none; background: url(../assets/gradients/bg-gradient-radiologie.jpg) no-repeat; }	
	.notie6 #radiologie-empty { background: url(../assets/keyvisuals/bg-radiologie-empty.png) no-repeat 130px 0; }
	
	#radiologie .layer {
		width: 100%; 
		height: 100%;	
	}



	#radiologie .layer1 { 
		/*
		background: #001d7d;
		opacity: .25; 
		filter: alpha(opacity=25); 
		width: 415px; 
		height: 500px; 
		top: 165px; 
		left: 609px;
		*/  
		background: url(../assets/layers/radiologie-layer1.png) 609px 165px no-repeat; 
		
	}
	#radiologie .layer2 { 
		/*	
		background: #01097c; 
		opacity: .25; 
		filter: alpha(opacity=25); 
		width: 780px; 
		height: 760px; 
		top: 0; 
		left: 244px; 
		*/
		background: url(../assets/layers/radiologie-layer2.png) 244px 0px no-repeat; 
	}
	#radiologie .layer3 { 
		/*
		background: #3b074c; 
		opacity: .50; 
		filter: alpha(opacity=50); 
		width: 835px; 
		height: 190px; 
		top: 590px; 
		left: 0; 
		*/
		background: url(../assets/layers/radiologie-layer3.png) 0px 590px no-repeat; 
	}
	#radiologie .layer4 { 
		/*
		background: #23006b; 
		opacity: .45; 
		filter: alpha(opacity=45); 
		width: 835px; 
		height: 415px; 
		top: 345px; 
		left: 0; 
		*/
		background: url(../assets/layers/radiologie-layer4.png) 0px 345px no-repeat; 
	}
	
	#radiologie .article { top: 150px; }			



#bg-mammografie-roentgen,
#mammografie,
#roentgen { height: 820px; }
	
	.notie6 #mammografie { background: url(../assets/keyvisuals/bg-mammografie.png) no-repeat left 220px; }
	.notie6 #roentgen { background: url(../assets/keyvisuals/bg-roentgen.png) no-repeat 140px -20px; }
	
	#mammografie .layer1 { background: #410b4a; opacity: .45; filter: alpha(opacity=45); width: 450px; height: 260px; top: 210px; left: 275px; }
	#mammografie .layer2 { 
		/*
		background: #172983; 
		opacity: .30; 
		filter: alpha(opacity=30); 
		width: 517px; 
		height: 600px; 
		top: 220px; 
		left: 0; 
		*/
		width: 100%; 
		height: 100%;
		background: url(../assets/layers/mammografie-layer2.png) 0 220px no-repeat;
	}

	#roentgen .layer1 { background: #803689; opacity: .25; filter: alpha(opacity=25); width: 80px; height: 505px; top: -35px; left: 432px; }
	#roentgen .layer2 { 
		/*
		background: #004d6c; 
		opacity: .20; 
		filter: alpha(opacity=20); 
		width: 435px; 
		height: 565px; 
		top: 40px; 
		left: 77px; 
		*/
		width: 100%; 
		height: 100%;
		background: url(../assets/layers/roentgen-layer2.png) 77px 40px no-repeat; 
	}

	#mammografie .article { top: 220px; }
	#roentgen .article { top: 140px; }
	
	
		
#bg-computertomografie-angiografie,
#computertomografie,
#angiografie { height: 700px; }

	#bg-computertomografie-angiografie { filter: none; background: #694b8b; }
	.notie6 #computertomografie { background: url(../assets/keyvisuals/bg-computertomografie.png) no-repeat left 200px; }
	.notie6 #angiografie { background: url(../assets/keyvisuals/bg-angiografie.png) no-repeat right 60px; }

	#computertomografie .layer1 { background: #c662ca; opacity: .15; filter: alpha(opacity=15); width: 745px; height: 130px; top: 110px; left: 10px; }
	#computertomografie .layer2 { background: #001169; opacity: .40; filter: alpha(opacity=40); width: 435px; height: 575px; top: 195px; left: 0; }

	#angiografie .layer1 { background: #0e0041; opacity: .30; filter: alpha(opacity=30); width: 460px; height: 400px; top: -15px; left: 30px; }
	#angiografie .layer2 { background: #000aa6; opacity: .20; filter: alpha(opacity=20); width: 375px; height: 585px; top: 40px; left: 137px; }
	
	#computertomografie .article { top: 235px; }
	#angiografie .article { top: 100px; }



#bg-magnetresonanztomografie-sonografie,
#magnetresonanztomografie,
#sonografie { height: 760px; }

	.notie6 #magnetresonanztomografie { background: url(../assets/keyvisuals/bg-magnetresonanztomografie.png) no-repeat right 135px; }
	.notie6 #sonografie { background: url(../assets/keyvisuals/bg-sonografie.png) no-repeat left top; }

	#magnetresonanztomografie .layer1 { background: #91167C; opacity: .35; filter: alpha(opacity=20); width: 399px; height: 760px; top: 135px; left: 113px; }

	#sonografie .layer1 { background: #35124b; opacity: .50; filter: alpha(opacity=50); width: 512px; height: 765px; top: -45px; left: 0; }
	
	#magnetresonanztomografie .article { top: 140px; }
	#sonografie .article { top: 130px; }


	
#bg-kontrastmittel,
#kontrastmittel,
#kontrastmittel-empty { height: 645px; }

	#bg-kontrastmittel { filter: none; background: #694b8b; }
	.notie6 #kontrastmittel { background: url(../assets/keyvisuals/bg-kontrastmittel.png) no-repeat right 110px; }			

	#kontrastmittel .layer1 { background: #130050; opacity: .20; filter: alpha(opacity=20); width: 600px; height: 410px; top: 160px; left: 0; }
	#kontrastmittel .layer2 { background: #542a69; opacity: .50; filter: alpha(opacity=50); width: 600px; height: 410px; top: 90px; left: 424px; }

	#kontrastmittel .article { top: 110px; }


	
#bg-nuklearmedizin,
#nuklearmedizin,
#nuklearmedizin-empty { height: 765px; }			
	
	#bg-nuklearmedizin { filter: none; background: #694b8b; }
	.notie6 #nuklearmedizin { background: url(../assets/keyvisuals/bg-nuklearmedizin.png) no-repeat right 110px; }

	#nuklearmedizin .layer1 { background: #001072; opacity: .35; filter: alpha(opacity=35); width: 835px; height: 545px; top: 110px; left: 189px; }
	#nuklearmedizin .layer2 { background: #220042; opacity: .30; filter: alpha(opacity=30); width: 480px; height: 405px; top: 310px; left: 0; }
	
	#nuklearmedizin .article { top: 140px; }



#bg-interventionelle_radiologie,
#interventionelle_radiologie,
#interventionelle_radiologie-right { height: 920px; }

	#bg-interventionelle_radiologie { filter: none; background: url(../assets/gradients/bg-gradient-interventionelle_radiologie.jpg) no-repeat; }
	.notie6 #interventionelle_radiologie { background: url(../assets/keyvisuals/bg-interventionelle_radiologie.png) no-repeat left 165px; }

	#interventionelle_radiologie .layer1 { background: #050045; opacity: .40; filter: alpha(opacity=40); width: 545px; height: 495px; top: 155px; left: 0; }	
	#interventionelle_radiologie .layer2 { background: #050045; opacity: .40; filter: alpha(opacity=40); width: 550px; height: 505px; top: 270px; left: 474px; }	
		
	#interventionelle_radiologie-right .article {
		top: 145px;
		left: 0;
	}



#bg-strahlentherapie,
#strahlentherapie,
#strahlentherapie-right { height: 920px; }

	.notie6 #strahlentherapie { background: url(../assets/keyvisuals/bg-strahlentherapie.png) no-repeat left 210px; }
	
	#strahlentherapie .layer1 { background: #001176; opacity: .40; filter: alpha(opacity=40); width: 937px; height: 310px; top: 45px; left: 87px; }
	#strahlentherapie .layer2 { background: #540076; opacity: .30; filter: alpha(opacity=30); width: 600px; height: 540px; top: 275px; left: 424px; }
	#strahlentherapie .layer3 { background: #8ac3fe; opacity: .40; filter: alpha(opacity=40); width: 395px; height: 410px; top: 220px; left: 0; }

	#strahlentherapie-right .article { top: 125px; }



#bg-strahlenschutz,
#strahlenschutz,
#strahlenschutz-empty { height: 780px; }

	.notie6 #strahlenschutz { background: url(../assets/keyvisuals/bg-strahlenschutz.png) no-repeat left 180px; }
	
	#strahlenschutz .layer1 { background: #000350; opacity: .20; filter: alpha(opacity=20); width: 500px; height: 500px; top: 330px; left: 0; }
	#strahlenschutz .layer2 { background: #400071; opacity: .30; filter: alpha(opacity=30); width: 160px; height: 750px; top: 30px; left: 864px; }
	
	#strahlenschutz .article { top: 150px; }



#bg-kontakt,
#kontakt,
#kontakt-empty { height: 815px; }

	#kontakt .layer1 { background: #694b8c; opacity: .50; filter: alpha(opacity=50); width: 185px; height: 690px; top: 25px; left: 839px; }
	#kontakt .layer2 { background: #060055; opacity: .20; filter: alpha(opacity=20); width: 705px; height: 370px; top: 445px; left: 0; }
	#kontakt .layer3 { background: #172983; opacity: .20; filter: alpha(opacity=20); width: 495px; height: 595px; top: 195px; left: 510px; }
	#kontakt .layer4 { background: #3b004a; opacity: .30; filter: alpha(opacity=30); width: 445px; height: 310px; top: 335px; left: 0; }		
	
	#bg-kontakt .bg-headline { padding-top: 160px; }

	#kontakt .article { top: 280px; }

		#kontakt h1 { font-size: 39px; }

		#kontakt p { margin-left: 0; }

	#kontakt-right .article { top: 376px; }

		#kontakt-right h3 { font-size: 20px; }
		
		#kontakt-right p {
			width: 330px;
			margin: 0;
		}
		
		#kontakt-right .weiterlesen { margin: 20px 0 0 0; }



#bg-impressum,
#impressum,
#impressum-right { height: 1615px; }

	#impressum .layer1 { background: #000694; opacity: .20; filter: alpha(opacity=20); width: 665px; height: 400px; top: 285px; left: 0px; }
	#impressum-right .layer1 { background: #48005a; opacity: .40; filter: alpha(opacity=40); width: 555px; height: 600px; top: 108px; left: -43px; }
	
	#bg-impressum .bg-headline { padding-top: 160px; }

	#impressum .article { top: 300px; }

		#impressum h1 { font-size: 39px; }

		#impressum p {
			margin-left: 0;
			width: 225px;
		}

		#impressum .article ul { margin-top: 20px; }

			#impressum .article ul li { display: inline; }
			
				#impressum .article ul a {
					display: inline-block;
					width: 63px;
					height: 62px;
				}
				
					#impressum .article ul a span { display: none; }
					
					#impressum .article ul .print { background: url(../img/icn-impressum-print.png) no-repeat center top; }					
					#impressum .article ul .print:hover { background-position: center bottom; }

					#impressum .article ul .download { background: url(../img/icn-impressum-print.png) no-repeat center top; }
					#impressum .article ul .download:hover { background-position: center bottom; }
				
					#impressum .article ul .mail { background: url(../img/icn-impressum-mail.png) no-repeat center top; }
					#impressum .article ul .mail:hover { background-position: center bottom; }
				
	#impressum-right .article {
		top: 215px;
		width: 350px;
		height: 445px;
		overflow: hidden;
	}

		#impressum-right h3 { margin-bottom: 25px; }

		#impressum-right p {
			width: 350px;
			margin: 0 0 25px 0;
		}
		
		#impressum-right .up { top: 215px; left: 430px; }
		#impressum-right .down { top: 650px; left: 430px; }
	
	#impressum-right .secondary {
		top: 779px;
		height: 650px;
	}
	

#angiografie_anchor,
#roentgen_anchor,
#mammografie_anchor,
#computertomografie_anchor,
#sonografie_anchor,
#magnetresonanztomografie_anchor {
	position: relative;
}

#angiografie_anchor {	
	top: -70px;
}
#computertomografie_anchor {
	top: -30px;
}
#sonografie_anchor {
	top: 20px;
}
#magnetresonanztomografie_anchor {
	top: -30px;
}
#mammografie_anchor {
	top: 50px;
}
#roentgen_anchor {
	top: 10px;
}