/* CSS-Datei NEW - all CSS - dirk 2012 */

.BFL  {
	font: 100% Verdana, Geneva, sans-serif;			/* Global Reset */
	font-size: 12px;
	color: #CCCCCC;
	background-color: #dddddd;				/* Canvas-Farbe */
	margin: 0; 						/* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	overflow:scroll;					/* erzwingt scrollbar CSS 3 - weglassen wg IE 6 ?*/
}

/* ----------------------------------------------------- links --------------------------------------------------------------------------------------*/
a {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	text-decoration: none;
}

a:link, a:visited, a:focus  {
	color: #FFFFFF;
	text-decoration: none;
}

a:hover, a:active {
	color: #6B6F7B;
}

/*----------------------------------------------- Große Kiste -------------------------------------------------------------------------------------*/

#container {
	width: 993px; 						/* the auto margins (in conjunction with a width) center the page */
	margin: 64px auto auto auto;				/* 64px vom oberen Rand enfernt*/
	float: none;
	background-color: #a7a7a7;				/* Default - Hintergrundfarbe Große Kiste */
	border-radius: 11px;
	box-shadow: 10px 20px 10px gray;
}

/*----------------------------------------------- Format Header ------------------------------------------------------------------------------------*/

#headerleft {
	float: left;
	height: 190px;						/* Höhe der weißen Fläche */
	width:	327px;						/* Breite Header LINKE Seite*/
	background-color: white;
	border-radius: 10px 0px 0px 0px;			/* abgerundete Ecke links oben*/
	
} 
#headerleft img{						/*Sprachwahl-Flagge*/
  	padding: 155px 0 0 30px;
  	border: 0px;
  	outline: none;
}

#headerright {
	float: left;
	height: 190px;						/* Höhe der weißen Fläche */
	width:	666px;						/* Breite Header auf RECHTER Seite*/
	background-color: white;
	border-radius: 0px 10px 0px 0px;			/* abgerundete Ecke rechts oben*/
	background-image: url(../pix/navigation/trlogo.jpg);	/* Logo auf weißer Fläche*/
	background-repeat: no-repeat; 
} 

#headerright a {						/* "HOME-Link" unter BFL-Logo*/
	float: right;
	height: 190px;
	width:	300px;
	text-decoration: none;
}

/*----------------------------------------------- Format Navigation --------------------------------------------------------------------------------*/

#navibox {
	float:	left;
	width:	297px;
	height:	auto;
	padding:40px 0px 0px 30px;
	line-height: 18px;
	border-radius: 0px 0px 0px 10px;
}
#block-one, #block-three, #block-five, #block-seven {
	float: left;						
	width:	115px;
	height: auto;
}
#block-two, #block-eight{
	float: left;						
	width:	auto;
	height: 130px;
}

#block-four, #block-six {
	float: left;						
	width:	auto;
	height: 130px;
}

/*----------------------------------------------------- Contentbox  -------------------------------------------------------------------------------*/

#contentbox {
	float: left;
	width: 586px;
	height: auto;						/* IE 6 !*/
	min-height: 540px;					/* Mindesthöhe aber nach unten stretchable*/
	padding: 40px 40px 0px 40px;
	background-color: #6b6f7b;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	border-radius: 0px 0px 10px 0px;
}

#contentbox a {							/* Farbanpassung Links in der Contentbox */
	color: #CCCCCC;
}

#contentbox a:hover {						
	color: #900;
}

/*----------------------------------------------------- Bilderlisten -------------------------------------------------------------------------------*/

.standardbrick {						/* Standard-Blockelement für Bildchen in der Contentbox*/
	height: 83px;
	width: auto;
	margin: 0 0 15px 0;					/* vertikaler Abstand der Bilder */
}

.standardbrick img {						
	float: left;
	border-style: none;					/* Keine Bilderrahmen in IE + Chrome*/
	border-width: 0px;
	margin: 0 40px 0 0;
}	

.teaserlinks {
	line-height: 83px;
	font-size: 20px;
	vertical-align: 33px;
	text-decoration: none;
}	

/*----------------------------------------------------- 1 Block in der Contentbox -------------------------------------------------------------------------------*/

.monoblock {
	float: left;
	width: 586px;
	height: 490px;
}

.monoblock #bildtext {
	
	text-indent: 40px;
	margin: 10px 0 0 0;
}


/*----------------------------------------------------- 2 Spalten in der Contentbox -------------------------------------------------------------------------------*/

.halfbrick {
	float: left;
	width: 293px;
	height: 490px;
}

.halfbrickright {
	float: right;
}

.textbox_01 {
	float: right;
	width: 263px;
	height: 490px;
	padding: 0 0 0 30px;
}

.textbox_01 p:first-letter {
	font-size: 140%;
	
}

	

/*----------------------------------------------------- 3 Spalten in der Contentbox -------------------------------------------------------------------------------*/

.tribrick {
	float: left;
	width:195px;

}

.tribrick img {						
	
	border:0;
	border-style: none;					/* Keine Bilderrahmen in IE + Chrome*/
	border-width: 0px;
	padding: 125px 0 0 0;
}	

	

td {
	text-align: center;
}

/*---------------------------------------------------------------Linkboxes-----------------------------------------------------------------------------------------*/

.leftlinkbox {
	float: left;
	width: 293px;
}

.rightlinkbox {
	float: right;
	width:293px;
	text-align: right;
}



/*----------------------------------------------------- Contentbox Projektliste -------------------------------------------------------------------------------*/

.projektname {
	line-height: 25px;
}

.projektname a {
	font-style: italic;
}


/*  --------------------------------------------------    Gallery-Pages    ------------------------------------------------------------------------------*/

.gallery {
	position: relative;
	width: 574px;
	height:	auto;
	margin: 20px 0 0 0;						/*position des gallerie-blockes*/
	font-size: 0px;
}

.gallery span {
	position: absolute;
	left: -4444px;							 /*großes bild liegt bei -4444px rum*/
}

.gallery span img{
	float: left;
	border-style: none;						/* Keine Bilderrahmen in IE + Crome*/
	border-width: 0px;
}
.gallery :hover span {							/*großes bild wird bei :hover auf 0 zurückgeholt*/
	position: absolute;
	top: -375px;
	left: 0px;
}


/*  --------------------------------------------------  Projektdaten unter Gallery ------------------------------------------------------------------------*/

.projectdata {
	float: left;
	width: 574px;

}	

.projectdata #projekt-year{
	float:left;
	width:82px;
	padding:15px 0 0 0;
}
.projectdata #projekt-name{
	float:left;
	width:492px;
	padding:15px 0 0 0;
}
.projectdata #next{
	float:left;
	width:auto;
	padding:10px 0 0 0;
}

.projectdata #projekt-txt{
	float:left;
	width:492px;
	padding:10px 0 0 82px;
}
.projectdata #bfl{
	float:left;
	width:82px;
	padding:10px 0 20px 0;
}
.projectdata #bfl-worx{
	float:left;
	width:470px;
	height:auto;
	padding:10px 0 0 0;
}

/*  --------------------------------------------------  Kontakt für direkte email 2023-06-30 joe------------------------------------------------------------------------*/

.kontaktdata {
	float: left;
	width: 574px;
}	

.kontaktdata #label {
	display: block;
	margin-top: 0,5em;
	margin-bottom: 1em;
}
input[type="text"],
.kontaktdata #textarea {
	width: 100%;
	padding: 0.5em;
}
.kontaktdata #message {
	width: 100%;
	padding: 0.5em;
}
.kontaktdata #button {
	padding: 1em 2em;
	background-color: #900;
	color: white;
	border: none;
	margin-top: 1em;
	margin-bottom: 1em;
}

/*----------------------------------------------- Finisher --------------------------------------------------------------------------------------*/
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;		
	height:0px;		
	font-size: 0px;
	line-height: 0px;	
}


/*----------------------------------------------- Media Query 4 Ipad --------------------------------------------------------------------------------------*/

@media only screen and (max-width: 1024px) 

{

	#container {
		width: 993px;
		height: auto;
		margin: 0px auto auto auto;					/* jetzt direkt am oberen Rand angedockt*/
		float: none;
		background-color: #a7a7a7;					
		border-radius: 0px;						/* Borderradius = 0*/
		box-shadow: none;						/* Boxshadow omitted*/
	}

	#headerleft {
		float: left;
		height: 96px;							/* Höhe der weißen Fläche angepasst*/
		width:	327px;							
		background-color: white;
		border-radius: 0px 0px 0px 0px;					/* Borderradius = 0*/
	
	} 
	#headerleft img{							/*Sprachwahl-Flagge*/
  		padding: 46px 0 0 30px;						/* Höhe angepasst: Höhe header - 35px*/
  		border: 0px;
  		outline: none;
	}

	#headerright {
		float: left;
		height: 96px;							/* Höhe der weißen Fläche angepasst*/
		width:	666px;							
		background-color: white;
		border-radius: 0px 0px 0px 0px;					/* Borderradius = 0*/
		background-image: url(../pix/navigation/trlogo_pad.jpg);	/* Jetzt IPAD - Spezial-Logo*/
		background-repeat: no-repeat; 
	} 

	#headerright a {							/* "HOME-Link" unter BFL-Logo*/
		float: right;
		height: 96px;
		width:	300px;
	}

	#contentbox {
		float: left;
		width: 586px;
		height: auto;							/* IE 6 !*/
		min-height: 600px;						/* Mindesthöhe aber nach unten stretchable*/
		padding: 40px 40px 0px 40px;
		background-color: #6b6f7b;
		background-position: 0px 0px;
		background-repeat: no-repeat;
		border-radius: 0px 0px 0px 0px;					 /* Borderradius = 0*/
}


/* ------------------------------------------------- mobil section beginnt------------------------------------------------- */


@media only screen and (max-width: 320px)  (orientation: portrait)   /* nur für hochformat  */




.BFL  {
	font: 100% Verdana, Geneva, sans-serif;			/* Global Reset */
	font-size: 1em;
	color: #CCCCCC;
	background-color: #dddddd;				/* Canvas-Farbe */
	margin: 0; 						/* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	overflow:scroll;					/* erzwingt scrollbar CSS 3 - weglassen wg IE 6 ?*/
}

/* ----------------------------------------------------- links --------------------------------------------------------------------------------------*/
a {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1em;
	text-decoration: none;
}

a:link, a:visited, a:focus  {
	color: #FFFFFF;
	text-decoration: none;
}

a:hover, a:active {
	color: #6B6F7B;
}

/*----------------------------------------------- Große Kiste - mobil -------------------------------------------------------------------------------------*/

#container {
	width:auto;
	max-width: auto; 					/* the auto margins (in conjunction with a width) center the page */
	margin: auto auto auto auto;				/* 64px vom oberen Rand enfernt*/
	float: none;
	background-color: #a7a7a7;				/* Default - Hintergrundfarbe Große Kiste */
	/*border-radius: 11px;*/
	/*box-shadow: 10px 20px 10px gray;*/
}

/*----------------------------------------------- Format Header - mobil ------------------------------------------------------------------------------------*/

#headerright {
	float: none;
	height: 5em;						/* Höhe der weißen Fläche */
	width: auto;						/* Breite Header auf RECHTER Seite*/
	background-color: white;
	background-image: url(../pix/navigation/trlogo_mob.jpg);	/* Logo auf weißer Fläche width 320px x height 57px*/
	background-repeat: no-repeat; 
} 

#headerright a {						/* "HOME-Link" unter BFL-Logo*/
	float: none;
	height: 5em;
	width: auto;
	padding: 0 0 1em 0;					/* padding top right bottom left */
	margin: 1em 0 0 0;					/* margin top right bottom left */
	text-decoration: none;
}

#headerleft {
	float: none;
	height: 4em;						/* Höhe der weißen Fläche */
	width:	auto;						/* Breite Header LINKE Seite*/
	background-color: white;
	
} 
#headerleft img{						/*Sprachwahl-Flagge*/
  	padding: 2em 0 0 2em;					/* padding top right bottom left */
  	border: 0px;
  	outline: none;
}


/*----------------------------------------------- Format Navigation - mobil --------------------------------------------------------------------------------*/

#navibox {
	float:	none;
	width:	auto;
	height:	auto;
	padding:1em 0px 0px 1em;				/* padding top right bottom left */
	line-height: 18px;
	border-radius: 0px 0px 0px 10px;
	}
#block-one {
	float: none;						
	width:	auto;
	height: auto;
	padding:1em 0px 0px 1em;				/* padding top right bottom left */
	}
#block-two {
	float: none;						
	width:	auto;
	height: auto;
	padding:1em 0px 0px 5em;				/* padding top right bottom left */
	}
#block-three {
	float: none;						
	width:	auto;
	height: auto;
	padding:1em 0px 0px 1em;				/* padding top right bottom left */
	}
#block-four {
	float: none;						
	width:	auto;
	height: auto;
	padding:1em 5em 0px 5em;				/* padding top right bottom left */
	}
#block-five {
	float: none;						
	width:	auto;
	height: auto;
	padding:1em 0px 0px 1em;				/* padding top right bottom left */
	}
#block-six {
	float: none;						
	width:	auto;
	height: auto;
	padding:1em 5em 0px 5em;				/* padding top right bottom left */
	}
#block-seven {
	float: none;						
	width:	auto;
	height: auto;
	padding:1em 0px 0px 1em;				/* padding top right bottom left */
	}
#block-eight{
	float: none;						
	width:	auto;
	height: auto;
	padding:1em 5em 2em 5em;				/* padding top right bottom left */
	}


/*----------------------------------------------------- Contentbox - mobil  -------------------------------------------------------------------------------*/

#contentbox {
	float: none;
	width: auto;
	height: auto;						/* IE 6 !*/
	min-height: auto;					/* Mindesthöhe aber nach unten stretchable*/
	padding:1em 0px 1em 1em;				/* padding top right bottom left - wie navibox*/
	background-color: #6b6f7b;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	background-size: auto;
	border-radius: 0 0 1em 0;
}

#contentbox a {							/* Farbanpassung Links in der Contentbox */
	color: #CCCCCC;
}

#contentbox a:hover {						
	color: #900;
}

/*----------------------------------------------------- Contentbox  Bilderlisten - mobil -------------------------------------------------------------------------------*/

.standardbrick {						/* Standard-Blockelement für Bildchen in der Contentbox*/
	height: 83px;
	width: auto;
	margin: 0 0 1em 0;					/* margin top right bottom left - vertikaler Abstand der Bilder */
}

.standardbrick img {						
	float: left;
	width: auto;
	border-style: none;					/* Keine Bilderrahmen in IE + Chrome*/
	border-width: 0px;
	margin: 0 2em 1em 0;					/* margin top right bottom left */
}	

.teaserlinks {
	line-height: 6em;
	font-size: 1em;
	vertical-align: 2em;
	text-decoration: none;
}	

/*----------------------------------------------------- 1 Block in der Contentbox - mobil -------------------------------------------------------------------------------*/

.monoblock {
	float: left;
	width: auto;
	height: auto;
}

.monoblock #bildtext {
	
	text-indent: 2em;
	margin: 1em 0 0 0;					/* margin top right bottom left */
}


/*----------------------------------------------------- 2 Spalten in der Contentbox - mobil -------------------------------------------------------------------------------*/

.halfbrick {
	float: none;
	width: auto;
	height: auto;
	padding: 0 0 1em 0;					/* padding top right bottom left */
	margin: 1em 0 0 0;					/* margin top right bottom left */
}

.halfbrickright {
	float: none;
	margin: 1em 0 0 0;					/* margin top right bottom left */
}

.textbox_01 {
	float: none;
	width: auto;
	height: auto;
	padding: 0 0 1em 0;					/* padding top right bottom left */
}

.textbox_01 p:first-letter {
	font-size: 1.4em;
	margin: 1em 0 0 0;					/* margin top right bottom left */
	
}

	

/*----------------------------------------------------- 3 Spalten in der Contentbox - mobil -------------------------------------------------------------------------------*/

.tribrick {
	float: left;
	width:195px;

}

.tribrick img {						
	
	border:0;
	border-style: none;					/* Keine Bilderrahmen in IE + Chrome*/
	border-width: 0px;
	padding: 125px 0 0 0;
}	

	

td {
	text-align: center;
}

/*---------------------------------------------------------------Linkboxes kenne ich noch nicht -----------------------------------------------------------------------------------------*/

.leftlinkbox {
	float: left;
	width: 293px;
}

.rightlinkbox {
	float: right;
	width:293px;
	text-align: right;
}



/*----------------------------------------------------- Contentbox Projektliste - mobil -------------------------------------------------------------------------------*/

.projektname {
	line-height: 2em;
}

.projektname a {
	font-style: italic;
}


/*  -------------------------------------------------- Contentbox  Gallery-Pages  - mobil   ------------------------------------------------------------------------------*/

.gallery {
	position: relative;
	width: auto;
	height:	auto;
	margin: 1em 0 0 0;						/*margin top right bottom left - position des gallerie-blockes*/
	font-size: 0px;
}

.gallery span {
	position: absolute;
	left: -4444px;							 /*großes bild liegt bei -4444px rum*/
}

.gallery span img{
	float: left;
	border-style: none;						/* Keine Bilderrahmen in IE + Crome*/
	border-width: 0px;
}
.gallery :hover span {							/*großes bild wird bei :hover auf 0 zurückgeholt*/
	position: absolute;
	top: -375px;
	left: 0px;
}


/*  -------------------------------------------------- Contentbox Text - Projektdaten unter Gallery - mobil ------------------------------------------------------------------------*/

.projectdata {
	float: none;
	width: auto;
	padding:1em 0 1em 0;					/* padding top right bottom left */
}	

.projectdata #projekt-year{
	float:none;
	width:auto;
	padding:1em 0 0 0;					/* padding top right bottom left */
}
.projectdata #projekt-name{
	float:none;
	width:auto;
	padding:1em 0 0 0;					/* padding top right bottom left */
}
.projectdata #projekt-txt{
	float:none;
	width:auto;
	padding:1em 0 0 0;					/* padding top right bottom left */
}
.projectdata #bfl{
	float:none;
	width:auto;
	padding:1em 0 0 0;					/* padding top right bottom left */
}
.projectdata #bfl-worx{
	float:none;
	width:auto;
	height:auto;
	padding:1em 0 0 0;					/* padding top right bottom left */
}
.projectdata #next{
	float:none;
	width:auto;
	padding:1em 0 0 1em;					/* padding top right bottom left */
	margin: 0 0 2em 1em;					/*margin top right bottom left - abstand zum unteren rand*/
}



/*----------------------------------------------- Finisher --------------------------------------------------------------------------------------*/
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;		
	height:0px;		
	font-size: 0px;
	line-height: 0px;	
}









}