﻿/***** LAYOUT.CSS *********************/
/***** PlattformNachwuchsArchitekten **/
/**************************************/


/***** COLOURS ************************/
/*
/*	RED		#DF0023
/*       Grau border Akkordeon #7F7E7E
/*	llGRAY	#B3B3B3
/*	lGRAY	#909090
/*	dGRAY	#666
/*
/**************************************/


body{
font:0.7em Verdana, Arial, Helvetica, sans-serif;
color:#666;
}

#bgr{
margin:auto;
width:auto;
height:140px;
background:#DF0023 url(../img/plattformnachwuchsarchiteckten-form.gif) top right no-repeat;
overflow:visible;
}
	
#containerNoMargin{
width:100%;
float:left;
}

#container{
margin:auto;
width:900px;
position:relative;
}

	#containerLogo{
	margin:auto;
	width:900px;
	position:relative;
	}
		
		#logo{
		position:absolute;
		left:120px;
		top:25px;
		}

/***********NAVI***********/
#navi{
width:245px;
padding:80px 0 0 5px;
float:left;
}

	#navi a,
	#navi a:visited,
	#navi a:active{
	width:100px;
	height:30px;
	display:block;
	padding-left:115px;
	line-height:2em;
	text-decoration:none;
	color:#666;
	}
	
	#navi a:focus,
	#navi a:hover,
	.home a#A,
	.posi a#A,
	.vera a#A,
	.wett a#A,
	.plat a#A,
	.mein a#A,
	.netz a#A,
	.kont a#A{
	color:#DF0023 !important;
	}
		
		.home a,
		.posi a,
		.vera a,
		.wett a,
		.plat a,
		.mein a,
		.netz a,
		.kont a{background:url(../img/bu.gif) no-repeat;}
		
		/*indivieduelle MouseOvers für die einzelnen Navigationspunkte*/
		.home a:focus,
		.home a:hover{background:url(../img/bu-home-hover.gif) no-repeat;}
		
		.posi a:focus,
		.posi a:hover{background:url(../img/bu-position-hover.gif) no-repeat;}
		
		.vera a:focus,
		.vera a:hover{background:url(../img/bu-veranstaltungen-hover.gif) no-repeat;}
		
		.wett a:focus,
		.wett a:hover{background:url(../img/bu-wettbewerb-hover.gif) no-repeat;}
		
		
		.plat a:focus,
		.plat a:hover{background:url(../img/bu-plattformpreis-hover.gif) no-repeat;}
		
		.mein a:focus,
		.mein a:hover{background:url(../img/bu-meinung-hover.gif) no-repeat;}
		
		.netz a:focus,
		.netz a:hover{background:url(../img/bu-netzwerk-hover.gif) no-repeat;}
		
		.kont a:focus,
		.kont a:hover{background:url(../img/bu-kontakt-hover.gif) no-repeat;}
		
		/*individuelle Actives für die einzelenen Navigationspunkte*/
		.home a#A{background:url(../img/bu-home.gif) no-repeat;}
		
		.posi a#A{background:url(../img/bu-position.gif) no-repeat;}
		
		.vera a#A{background:url(../img/bu-veranstaltungen.gif) no-repeat;}
		
		.wett a#A{background:url(../img/bu-wettbewerb.gif) no-repeat;}
		
		.plat a#A{background:url(../img/bu-plattformpreis.gif) no-repeat;}
		
		.mein a#A{background:url(../img/bu-meinung.gif) no-repeat;}
		
		.netz a#A{background:url(../img/bu-netzwerk.gif) no-repeat;}
		
		.kont a#A{background:url(../img/bu-kontakt.gif) no-repeat;}
/***********NAVI END***********/

/***********CONTENT***********/
#content{
padding-top:40px;
width:650px;
float:left;
/*background:url(../img/schatten.gif) 440px 0 no-repeat;*/
}

.contentParagraph{
float:left;
width:100%;
}

.contentTxt{
float:left;
width:100%;
}

.hrTop{
position:relative;
width:370px;
height:9px;
border-bottom:1px #DF0023 solid;
margin:1em 0 2.5em 0;
float:left;
}

	.hrTop a,
	.hrTop a:visited,
	.hrTop a:active{
	position:absolute;
	width:20px;
	height:15px;
	display:block;
	right:-15px;
	bottom:-1px;
	font-size:0;
	background:#fff url(../img/bu-top.gif) bottom center no-repeat;
	}
	
	.hrTop a:focus,
	.hrTop a:hover{
	background:#fff url(../img/bu-top-hover.gif) bottom center no-repeat;
	}


/*Text*/
.contentTxtL,
.contentTxtVera{
width:380px;
float:left;
}

	/*Links im Text*/
	.contentTxtL p a,
	.contentTxtL p a:visited,
	.contentTxtL p a:active,
	.contentTxtL ul a,
	.contentTxtL ul a:visited,
	.contentTxtL ul a:active,
	#veraListe div p a,
	#veraListe div p a:visited,
	#veraListe div p a:active,
	#netzListe div p a,
	#netzListe div p a:visited,
	#netzListe div p a:active{
	display:inline;
	text-decoration:none;
	padding:0 2px 0 15px;
	background:url(../img/bu-arrow.gif) 4px 5px no-repeat;
	color:#909090;
	}
	
	.contentTxtL p a:focus,
	.contentTxtL p a:hover,
	.contentTxtL ul a:focus,
	.contentTxtL ul a:hover,
	#veraListe div p a:focus,
	#veraListe div p a:hover,
	#netzListe div p a:focus,
	#netzListe div p a:hover{
	background:url(../img/bu-arrow-hover.gif) 4px 5px no-repeat;
	color:#DF0023;
	}
	
	/*Linklisten*/
	.contentTxtL ul{
	margin-bottom:1em;
	width:380px;
	}
	
	.contentTxtL ul a,
	.contentTxtL ul a:visited,
	.contentTxtL ul a:active{display:block;}
	
	.contentTxtL ul li{
	padding:1px 0 1px 0;
	width:380px;
	}

	.contentTxtL p,
	.contentTxtL ul{
	float:left;
	}


/*Thumbnails*/
.contentTxtR,
.contentTxtR2{
width:180px;
float:right;
}

.contentTxtR{
margin:37px 0 0 0;
}


	.contentTxtR li,
	.contentTxtR2 li{
	display:block;
	float:left;
	margin:0 12px 11px 0; /*<<< Abstände zwischen den Bildern auf der rechten Seite*/
	}
	
		/*MouseOver-Fenster*/
		.contentTxtR li a,
		.contentTxtR li a:visited,
		.contentTxtR li a:active,
		.contentTxtR2 li a,
		.contentTxtR2 li a:visited,
		.contentTxtR2 li a:active{
		display:block;
		padding:2px;
		position:relative;
		text-decoration:none;
		font-weight:normal;
		cursor:default;
		z-index:9999;/*wegen IE(6)*/
		}
		
		.contentTxtR li a:focus,
		.contentTxtR li a:hover,
		.contentTxtR2 li a:focus,
		.contentTxtR2 li a:hover{
		background:#fff url(../img/img-select.gif) top left no-repeat;
		}
		
			.contentTxtR li a .l,
			.contentTxtR2 li a .l,
			.contentTxtR li a .r,
			.contentTxtR2 li a .r{
		 	width:384px;
			position:absolute;
			top:2px;
			padding:0px;
			background:#fff;
			border:1px solid #909090;
			z-index:99999;
			}
			
			/*Absolute Position*/
			.l{right:77px;}
			.r{right:138px;}
			
				/*kurztext unter dem "großen" Bild*/
				.kleinerTxt{
				width:368px;
				padding:8px;
				margin-top:0px;
				color:#666;
				float:left;
				}
						
						
				/**********Display: none*/
				.contentTxtR li a .l,
				.contentTxtR li a:visited .l,
				.contentTxtR li a:active .l,
				.contentTxtR2 li a .l,
				.contentTxtR2 li a:visited .l,
				.contentTxtR2 li a:active .l,
				
				.contentTxtR li a .r,
				.contentTxtR li a:visited .r,
				.contentTxtR li a:active .r,
				.contentTxtR2 li a .r,
				.contentTxtR2 li a:visited .r,
				.contentTxtR2 li a:active .r{display:none;}
			
				/**********Display: block*/
				.contentTxtR li a:focus .l,
				.contentTxtR li a:hover .l,
				.contentTxtR2 li a:focus .l,
				.contentTxtR2 li a:hover .l,
				
				.contentTxtR li a:focus .r,
				.contentTxtR li a:hover .r,
				.contentTxtR2 li a:focus .r,
				.contentTxtR2 li a:hover .r{display:block;}
					
					/*MouseOver für "Zurück zur Übersicht"*/
					a#veraZurueck:focus,
					a#veraZurueck:hover{
					background:#fff url(../img/img-select2.gif) top left no-repeat;
					cursor:pointer;
					}
					
						a#veraZurueck span{
						width:106px;
						height:22px;
						display:block;
						background:#fff url(../img/vera-zurueck.gif) top left no-repeat;
						
						color:#000;
						text-align:center;
						font-size:.8em;
						line-height:1.1em;
						padding-top:23px;
						}
						
						a#veraZurueck:focus span,
						a#veraZurueck:hover span{
						background:#fff url(../img/vera-zurueck-hover.gif) top left no-repeat;
						}
				
				
					.weitereSeiten{
					width:106px;
					clear:left;
					}
					
						.weitereSeiten p{
						width:106px;
						font-weight:bold;
						margin-top:40px; /*<<< oberer Abstand zu den Bildern*/
						}
						
							.weitereSeiten p a,
							.weitereSeiten p a:visited,
							.weitereSeiten p a:active{
							background:url(../img/bu-arrow.gif) no-repeat scroll 4px 5px;
							color:#909090;
							padding:0 2px 0 15px;
							cursor:pointer;
							}
							
							.weitereSeiten p a:focus,
							.weitereSeiten p a:hover{
							background:url(../img/bu-arrow-hover.gif) no-repeat scroll 4px 5px;
							color:#DF0023 !important;
							}
							
							
/***********"Veranstaltungen" Accordion*/
#veraListe li{display:inline;}/*wegen IE(6)*/

/*Für Accordion-Reiter (.head)*/
#veraListe li a.head,
#veraListe li a.head:visited,
#veraListe li a.head:active{
display:block;
background:url(../img/bu-arrow.gif) 4px 10px no-repeat;
text-decoration:none;
float:left;
padding:5px 0;
}


/*MouseOver Zustand für Accordion-Reiter - Nur bgr wird verändert*/
#veraListe li a.head:focus,
#veraListe li a.head:hover{background:url(../img/bu-arrow-hover.gif) 4px 10px no-repeat;}


	/*Button Icon und Schriftfarbe für Accordion-Reiter*/
	#veraListe li a.head 			span.headIcon,
	#veraListe li a.head:visited 	span.headIcon,
	#veraListe li a.head:active 	span.headIcon{
	width:230px;
	padding:0 5px 0 20px;
	float:left;
	color:#666;
	}
	
	/*Button Icon und Schriftfarbe für Accordion-Reiter im MouseOver Zustand*/
	#veraListe li a.head:focus 	span.headIcon,
	#veraListe li a.head:hover 	span.headIcon{color:#DF0023;}



	/*Für aktiven Button der Hintergrund im Accordion-Reiter*/
	#veraListe li a.ui-state-active{
	background:/*#fafafa*/ url(../img/bu-arrow-hover.gif) 4px 10px no-repeat !important;
	border-top:1px solid #7F7E7E;
	}
	
	/*Für aktiven Button die Schriftfarbe im Accordion-Reiter*/
	#veraListe li a.ui-state-active span.headIcon,
	#veraListe li a.ui-state-active span.date{
	color:#DF0023 !important;
	}

	/*Für Datumanzeige im Accordion-Reiter*/
	#veraListe li a.head 			span.date,
	#veraListe li a.head:visited 	span.date,
	#veraListe li a.head:active 	span.date{
	width:125px;
	font-size:.8em;
	float:right;
	color:#666;
	}
	
	#veraListe li a.head:focus 	span.date,
	#veraListe li a.head:hover 	span.date{
	color:#DF0023;
	}
	

/*Für Accordion-Textbereich*/
#veraListe li div{
/*height:85px;	<<< Definiert  die Höhe aller Textfelder wenn kein autoHeight: false vorhanden ist*/
float:left;
padding:0 20px;
background:/*#fafafa*/ url(../img/accordion-bgr1.gif) bottom repeat-x;
}

	#veraListe li div p{
	/*margin:10px 0 0 0;*/
	width:340px;
	
	/*wenn Accordion autoHeight: false hat*/
	padding-bottom:1em;
	margin:0;
	}



/*Für Bild unter Accordion*/
#veraPlattform{
width:380px;
height:96px;
position:relative;
float:left;
display:block;
margin:10px 0 0;
}

	#veraPlattform img{
	position:absolute;
	left:-140px;
	}



/*Für Archiv*/
#veraArchiv{
float:left;
margin-top:10px;
}

#veraArchiv p{
width:360px;				/*<<< wird, wenn JavaScript an ist, auf 380px gesetzt*/
float:left;
/*border-top:1px solid #ddd;*/
padding:5px 0 5px 20px;		/*<<< wird, wenn JavaScript an ist, auf 0 gesetzt*/
display:block;
}
		
		/*Für Überschrift/Button der Archivliste*/
		#veraArchiv p a,
		#veraArchiv p a:visited,
		#veraArchiv p a:active{
		background:none;
		padding:5px 0 5px 20px;
		display:block;
		color:#666;
		text-decoration:none;
		width:360px;
		}
		
		#veraArchiv p a:focus,
		#veraArchiv p a:hover{
		/*background:#fafafa;*/
		color:#DF0023;
		}
		
		
		/*Für die Archivliste*/
		#veraArchiv ul{
		float:left;
		width:380px;	/*<<< wegen IE (6)*/
		/*border-bottom:1px solid #eee;*/
		overflow:hidden;
		}
		
	
		#veraArchiv ul li a.head,
		#veraArchiv ul li a.head:visited,
		#veraArchiv ul li a.head:active{
		display:block;
		background:/*#fafafa*/ url(../img/bu-arrow.gif) 4px 10px no-repeat;
		text-decoration:none;
		float:left;
		padding:5px 0;
		color:#DF0023;
		}
		
		#veraArchiv ul li a.head:focus,
		#veraArchiv ul li a.head:hover{background:transparent url(../img/bu-arrow-hover.gif) 4px 10px no-repeat;}
		
			#veraArchiv ul li a.head 			span.headIcon,
			#veraArchiv ul li a.head:visited 	span.headIcon,
			#veraArchiv ul li a.head:active 	span.headIcon{
			width:230px;
			padding:0 5px 0 20px;
			float:left;
			color:#666;
			}
			
			/*Button Icon und Schriftfarbe für Archivliste im MouseOver Zustand*/
			#veraArchiv ul li a.head:focus 	span.headIcon,
			#veraArchiv ul li a.head:hover 	span.headIcon{color:#DF0023;}

			#veraArchiv ul li a.head 			span.date,
			#veraArchiv ul li a.head:visited 	span.date,
			#veraArchiv ul li a.head:active 	span.date{
			width:125px;
			font-size:.8em;
			float:right;
			color:#666;
			}
			
			#veraArchiv ul li a.head:focus 	span.date,
			#veraArchiv ul li a.head:hover 	span.date{
			color:#DF0023;
			}
			

/***********"Netzwerk" Accordion*/
#netzListe li{display:inline;}/*wegen IE(6)*/

/*Für Accordion-Reiter (.head)*/
#netzListe li a.head,
#netzListe li a.head:visited,
#netzListe li a.head:active{
display:block;
background:url(../img/bu-arrow.gif) 4px 10px no-repeat;
text-decoration:none;
float:left;
padding:5px 0;
}


/*MouseOver Zustand für Accordion-Reiter - Nur bgr wird verändert*/
#netzListe li a.head:focus,
#netzListe li a.head:hover{background:url(../img/bu-arrow-hover.gif) 4px 10px no-repeat;}


	/*Button Icon und Schriftfarbe für Accordion-Reiter*/
	#netzListe li a.head 			span.headIcon,
	#netzListe li a.head:visited 	span.headIcon,
	#netzListe li a.head:active 	span.headIcon{
	width:230px;
	padding:0 5px 0 20px;
	float:left;
	color:#666;
	}
	
	/*Button Icon und Schriftfarbe für Accordion-Reiter im MouseOver Zustand*/
	#netzListe li a.head:focus 	span.headIcon,
	#netzListe li a.head:hover 	span.headIcon{color:#DF0023;}



	/*Für aktiven Button der Hintergrund im Accordion-Reiter*/
	#netzListe li a.ui-state-active{
	background:/*#fafafa*/ url(../img/bu-arrow-hover.gif) 4px 10px no-repeat !important;
	border-top:1px solid #7F7E7E;
	}
	
	/*Für aktiven Button die Schriftfarbe im Accordion-Reiter*/
	#netzListe li a.ui-state-active span.headIcon,
	#netzListe li a.ui-state-active span.date{
	color:#DF0023 !important;
	}

	/*Für Datumanzeige im Accordion-Reiter*/
	#netzListe li a.head 			span.date,
	#netzListe li a.head:visited 	span.date,
	#netzListe li a.head:active 	span.date{
	width:125px;
	font-size:.8em;
	float:right;
	color:#666;
	}
	
	#netzListe li a.head:focus 	span.date,
	#netzListe li a.head:hover 	span.date{
	color:#DF0023;
	}
	

/*Für Accordion-Textbereich*/
#netzListe li div{
/*height:85px;	<<< Definiert  die Höhe aller Textfelder wenn kein autoHeight: false vorhanden ist*/
float:left;
padding:0 20px;
background:/*#fafafa*/ url(../img/accordion-bgr1.gif) bottom repeat-x;
}

	#netzListe li div p{
	/*margin:10px 0 0 0;*/
	width:340px;
	
	/*wenn Accordion autoHeight: false hat*/
	padding-bottom:1em;
	margin:0;
	}



/***********CONTENT END***********/

/***********FOOTER***********/
#footer{
width:100%;
height:35px;
background:#DF0023;
margin-top:150px;
padding-top:20px;
float:left;
}

	#footer div{
	margin:auto;
	width:900px;
	height:100%;
	}
	
		#footer div span{color:#fff;}
		
		#footer div span.b{margin-left:250px;}
/***********FOOTER END***********/

/***********GLOBALS & TEXT***********/

p{
margin-bottom:1em;
width:380px;
}

h1{
margin-bottom:1.5em;
font-size:1.5em;
font-weight:bold;
color:#DF0023;
}

h2{
font-size:1.2em;
font-weight:bold;
margin-bottom:.5em;
}

.h{
margin-top:-1.5em;
margin-bottom:1.6em;
display: block;
font-size:1.25em;
font-weight:bold;
color:#DF0023;
}

a{cursor:pointer;}

.b{font-weight:bold;}

.i{font-style:italic;}

.sMargin{margin:0 0 1px 0;}

.noMargin{margin:0 !important;}

/***/
.normalList{
margin-bottom:1em;
list-style:inside square !important;
}

	.normalList li{
	display:list-item !important;
	}


/*Liststyles für Text*/
.normalListInText{list-style:outside square !important;}

.decimalListInText{list-style:outside decimal !important;}

.lowlatinListInText{list-style:outside lower-latin !important;}


	.normalListInText,
	.decimalListInText,
	.lowlatinListInText{margin-bottom:1em;}
	
	.normalListInText li,
	.decimalListInText li,
	.lowlatinListInText li{
	margin-bottom:.5em;
	margin-left:23px;
	width:auto !important;
	}

	.normalListInText a,
	.decimalListInText a,
	.lowlatinListInText a{display:inline !important;}
	

/***/
.archiveListInText{margin-top:40px;}

	.archiveListInText li{margin-bottom:.2em;}

hr{
border:none;
float:left;
width:100%;
height:1px;
background:#909090;
margin: 15px 0 20px 0 ;
}	
/***********GLOBALS & TEXT END***********/

