/* Autor Sascha Jecht */

a{
	color:#7F7F7F;
	text-decoration:none;
}

body
{
	background-color: #EFEFEF;
	background-image:url('images/bg.png');
	font-family:Arial, Helvetica, sans-serif;
	font-size:12pt;
	color:#7F7F7F;	
}

a
{

}

a:hover
{

}

a img
{

}


/* divtag: Schriften */

.ueber
{
	font-size: 12pt;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 9px;
	text-align: left;
	vertical-align: top;
}

/* divtag: root */

	#root
	{
	width: 1280px;
	background-color: #FFFFFF;
	height: 100%;
	border: thick;
	border-style: solid;
	border-color: #D9D9D9;
}

		#head
		{
		background-image:url('images/header.jpg');
		background-repeat:no-repeat;
		background-position:center;
		width:1280px;
		height:198px;	
		}
		
		#sub_bar
		{
		background-color: #D9D9D9;
		}			
		
		#bar
		{
		margin: 0px 170px 0px 140px;
		padding-top:3px;
		background-color: #D9D9D9;
		height: 30px;
		}			

			.content_bar_1
			{
			width:100%;
			}
			.content_bar_no_bold
			{
			font-weight:normal;
			text-align:right;
			letter-spacing:1px;
			}
			
		#bar_proj 			/* Unter Projektseite, Neuer Grenzbereich der Bar*/	
		{
		margin: 0px 170px 0px 165px;
		padding-top:3px;
		background-color: #D9D9D9;
		height: 30px;
		}	
					
			/* Unter Projektseite, je der ungenutzte Button als Überschrift */	
			.content_bar_just_title_1 
			{
			font-weight:bold;
			font-size: 10pt;
			letter-spacing:1px;
			font-family:Arial;
			width:450px;
			text-align:left;	
			}
			/* Wie darüber, nur dass der text die korrekte Farbe hat */			
			.content_bar_just_title_text 
			{
			color:#999999;		
			}
			/* Unter Projektseite, zum Ausrichten des Buttons für Zurück*/	
			.content_bar_just_title_2 
			{
			font-weight:bold;
			font-size: 12pt;
			letter-spacing:1px;
			font-family:Arial;
			text-align:left;
			}



		#bio
		{
		background-color: #FFFFFF;
		height: 500px;
		}
		
			.bio_tab
			{
			width:100%;
			height:100%;
			}
			
				.tab_l
				{
				width: 613px;
				background-image: url('images/Foto.jpg');
				background-repeat: no-repeat;
				background-position:200px 100px;
				}

				.tab_r
				{
				padding-left: 0px;
				padding-right: 170px;
				text-align: justify;
				line-height: 21px;
				}
		

		#bar_II
		{
		background-color: #D9D9D9;
		height: 5px;
		}	
		
		#proj_titel
		{
		height: 150px;
		background-color: #FFFFFF;
		background-image:url('images/header II.jpg');
		background-repeat: no-repeat;
		background-position:613px 20px;	
		}				
			.proj_titel_r
			{
			margin-left:613px;
			margin-top:90px;
			width:490px;
			height:40px;
			float:left;	
			}
						
			.proj_titel_s
			{
			margin-left: 613px;
			margin-top: 18px;
			width: 490px;
			height: 25px;
			float: left;
			}
				.proj_titel_t
				{
				width:100%;
				}
				.proj_titel_t_a
				{
				width:40px;
				text-align: left;				
				}
				.proj_titel_t_b
				{
				width: 68px;
				text-align: center;
				}
				.proj_titel_t_c
				{
				width:40px;
				text-align: right;				
				}

		
				
		#proj
		{
		background-color: #FFFFFF;
		}
				.proj
				{
				background-color: #FFFFFF;
				margin-top:20px;
				}
				.p_symb
				{
				width:100%;
				height:150px;
				}
				.p_symb_I
				{
				float:left;
				width:135px;
				height:135px;
				margin-left:280px;
				margin-top:9px;
				}
				.p_symb_II
				{
				text-align:left;
				float: left;
				width: 175px;
				height: 25px;
				margin-left: 10px;
				margin-top: 64px;
				max-height: 25px;
				max-width: 175px;
				}				
				.p_symb_titel
				{
				float:right;
				width:500px;
				height:10px;
				text-align:left;
				margin-right:164px;
				margin-top:14px;
				line-height: 21px;
				}
				.p_symb_text
				{
				float:right;
				width:480px;
				height:100px;
				margin-right:184px;
				margin-top:12px;
				text-align: justify;
				line-height: 21px;
				}
				
			.proj_ende
			{
			width:100%;
			height:190px;
			margin-top:20px;
			}
			
/* Impressum */

		#impress
		{
		height:1200px;
		float:left;		
		}
			.imptext
			{
			text-align: justify;
			font-size:small;
			}

/* Projektseiten */

		#proj_text
		{
		background-color: #FFFFFF;
		height: 185px;
		padding-top:20px;
		padding-left: 170px;
		padding-right: 170px;
		text-align: justify;
		line-height: 21px;		
		}
			.pdf_zeile
			{
			width:100%;
			height:34px;
			margin-top:15px;		
			}
			.pdf_zeile_text
			{		
			font-size: small;
			vertical-align: middle;
			}

		#proj_text_s
		{
		background-color: #FFFFFF;
		height: 80px;
		padding-top:20px;
		padding-left: 170px;
		padding-right: 170px;
		text-align: justify;
		line-height: 21px;		
		}

		#proj_text_m
		{
		background-color: #FFFFFF;
		height: 125px;
		padding-top:20px;
		padding-left: 170px;
		padding-right: 170px;
		text-align: justify;
		line-height: 21px;		
		}

		
						
		#proj_slider
		{
		text-align: justify;
		font-size:small;
		height: 700px;
		}



				
/* Effekte */

/* Ein- Ausblenden */

#blend { position: relative }

#blend img#top:hover { opacity:0 }

#blend img { position: absolute; 
    top: 0; left: 0; opacity: 1;    
    transition: opacity 1s
}
				
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
	}

/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: #7F7F7F;
	color: #fff;
	text-align: center;
	padding: 5px 0;
/* Position the tooltip text */position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -60px; /* Fade in tooltip */;
	opacity: 0;
	transition: opacity 1s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #7F7F7F transparent transparent transparent;
	}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
	}

/* Tooltip II ohne Cursor Änderung */

.tooltip2 {
    position: relative;
    display: inline-block;
	}
/* Tooltip text */
.tooltip2 .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: #7F7F7F;
	color: #fff;
	text-align: center;
	padding: 5px 0;
/* Position the tooltip text */position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -60px; /* Fade in tooltip */;
	opacity: 0;
	transition: opacity 1s;
}

/* Tooltip arrow */
.tooltip2 .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #7F7F7F transparent transparent transparent;
	}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip2:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
	}


/* Schalter */
.button {
	background-color: #D9D9D9;
	font-weight:bold;
	color:#999999;
	border: none;
	text-align: center;
	font-size: 12pt;
	letter-spacing:1px;
	cursor: pointer;
	font-family:Arial;
	}


.button span {
	cursor: pointer;
	transition: 1s;
	}

.button:hover span {
	color:black;
	}	

/* Dropdown */

/* The container <div> - needed to position the dropdown content */
.dropdown {
	position: relative;
	display: inline-block;
	z-index:2000;
	}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	visibility: hidden; /* hides sub-menu */
	opacity: 0;
	transition: opacity 0.5s;
	position: absolute;
	background-color: #D9D9D9;
	min-width: 135px;
	z-index:2000;
	}

/* Links inside the dropdown */
.dropdown-content a {
	color: #808080;
	margin-bottom:10px;
	padding-left:5px;
	padding-top:11px;
	text-decoration: none;
	display: block;
	cursor: default;
	line-height: 1px;
	text-align:left;
	z-index:2000;
	}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
	visibility: visible; /* shows sub-menu */
	opacity: 1;
	z-index:2000;
	}

/* Slideshow CSS */

/**
 * Pure CSS3 Slideshow Without Page Jump by Taufik Nurrohman
 * 26 April 2012
 * http://hompimpaalaihumgambreng.blogspot.com
 */


/**
 * Pure CSS3 Slideshow Without Page Jump by Taufik Nurrohman
 * 26 April 2012
 * http://hompimpaalaihumgambreng.blogspot.com
 */

/* General */
#css3-slider {
  margin:0px auto;
  padding:0px 0px;
  width:1280px;     /* Sliderfeldgröße */
  height:700px;
  position:relative;
}

#css3-slider li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

/* Navigationszahlen */
#css3-slider li input + label {
	position: absolute;
	top: 5px;			/* Navigationszahlen Feld Abstand oben */
	left: 10px;			/* Navigationszahlen Feld Abstand links */
	z-index: 999;
	font: bold 16px Arial,Sans-Serif;
	background-color: #7F7F7F;
	color: white;
	padding: 6px 0px;		/* Navigationszahlen Inhalt Abstand oben*/
	width: 30px;			/* Navigationszahlen Feld breite */
	height:22px;
	text-align: center;
	cursor: pointer;
}

#css3-slider li:nth-child(2) label {left:50px;}
#css3-slider li:nth-child(3) label {left:90px;}
#css3-slider li:nth-child(4) label {left:130px;}
#css3-slider li:nth-child(5) label {left:170px;}
#css3-slider li:nth-child(6) label {left:210px;}
#css3-slider li:nth-child(7) label {left:250px;}
#css3-slider li:nth-child(8) label {left:290px;}
#css3-slider li:nth-child(9) label {left:330px;}
#css3-slider li:nth-child(10) label {left:370px;}
#css3-slider li:nth-child(11) label {left:410px;}

/* Navigationszahlen aktiviert */
#css3-slider li input:checked + label {
	background-color: #333333;
	color: white;
	
}

/* Images */
#css3-slider li img {
  border:none;
  outline:none;
  position:absolute;	
/*  top:50%;					Steuert eine Bewegung des Bildes bei der Transition										*/
/*  left:50%;																											*/
/*  width:0px;					Steuert ob das Bild bei der Transition skaliert wird (auf 0px * 0px in diesem Falle ) 	*/
/*  height:0px;																											*/
  visibility:hidden;
  opacity:0;
  transition: 2s ease-in-out;    /*	Steuert die Zeit, die das Bild benötigt, um auszufaden								*/
}

/* Captions */
#css3-slider a {
  text-decoration:none;
}

#css3-slider li a span {
  cursor:default;
  display:block;
  position:absolute;
  right:0px;							/* Positionierung des Textes */
  top:0px;
  left:0px;
/*	background-color:gray;      /* Steuert den hinterlegten Balken des Textes*/
  font:normal 11px/26px Arial,Sans-Serif;
  font-weight:bold;
  color:black;						/* Textfarbe von der Bildbeschreibung*/

  padding:0px 10px;
  text-align:right;
  opacity:0;
  viibility:hidden;
/*  transition: opacity 0s ease-in-out;		Steuert die Zeit, bis das neue Bild verfügbar ist, es soll sofort da sein, und dahin geblendet werden, daher 0s, kann also deaktivert sein	*/

}


/* Show the image with transition */
#css3-slider li input:checked ~ img,
#css3-slider li input:checked ~ a img {
  	top:0%;			/* Ausrichtung der Bilder ausgehend von oben links */
 	left:0%;
 	width:1280px;	/* Bildergröße */
  	height:700px;
  	visibility:visible;
	opacity:1;
  	transition: opacity 1s ease-in-out;	/* Steuert die Zeit des umfadens, bei 10s, 5s wird Bild ausgeblendet, weitere das neue eingeblendet*/
	z-index:99;							/* Es liegt weiter vorn als eines mit weniger z-index*/
	cursor:default;						/* Der Mauszeiger bleibt unverändert über dem Bild*/

}

/* Schrift unten Rechts, Sichtbarkeit und Ebene */
#css3-slider li input:checked ~ a span {
  opacity:1;
  transition: opacity 1s ease-in-out;			/* Steuert die zeit, die der text benötigt zum Umfaden	*/
  z-index:100;									/* Es liegt weiter vorn als eines mit weniger z-index	*/

}

/* Die Auswahlhäckchen werden versteckt */
#css3-slider input {
  display:none;
}