/* ++++++++++ STYLESHEET KIESERLING-STIFTUNG.DE / PYRAMEDIA MEDIENGESTALTUNG 2009 / TIM R. GLOYSTEIN ++++++++++ */
@import url('../_css/reset.css');
@import url('../_css/navigation.css');


/* ++++++++++ ALLGEMEINES ++++++++++ */
body, html
 {
  width: 100%;
		height: 100%;
  background: #FFF;
		font-family: Tahoma, Arial, sans-serif;
		color: #5A5A5A;
	}
/* ++++++++++ ENDE ALLGEMEINES ++++++++++ */


/* ++++++++++ LAYOUT ++++++++++ */
#abstand 
 { 
		width: 1px;
		height: 50%;
		margin-bottom: -200px;
		float: left;
 }

#container
 {
		position: relative;
		clear: left;
		width: 800px;
		height: 400px;
	 margin: 0 auto;
		border: 1px solid #818284;
	}
	
#claim
 {
		position: absolute;
		top: 280px;
		left: 55px;
	}
	
#claim a
 {
		font-weight: normal;
		font-size: 16px;
		line-height: 20px;
		color: #5A5A5A;
	}
	

	
#inhalt
 {
		position: relative;
		top: 65px;
		left: 180px;
		width: 620px;
		height: 230px;
		background: #E7E7E7;
	}	
	
#inhalt #text
 {
		width: 295px;
		height: 210px;
		padding: 10px 0px 1px 10px;
	}
	
#inhalt #bild
 {
		width: 295px;
		height: 230px;
		padding: 0;
	}	
	
#inhalt #text-rechts
 {
  position: absolute;
		top: 0;
		left: 310px;
		width: 295px;
		height: 210px;
		padding: 10px 0px 1px 10px;
	}

#inhalt #text-breit
 {
		width: 600px;
		height: 210px;
		padding: 10px 0px 1px 10px;		
	}
	
#downloads
 {
		position: absolute;
		top: 235px;
		left: 10px;
		height: 15px;
		font-size: 12px;
	}
	
#logo
 {
		position: absolute;
		top: 25px;
		left: -45px;
		width: 155px;
		height: 155px;
		text-align: center;
	}
	
#navigation
 {
		position: absolute;
		top: 205px;
		left: 55px;
		width: 100px;
 	height: 120px;
	}
	
#subnavigation
 {
	 position: absolute;
		top: 375px;
		left: 160px;
		text-align: right;
	}
	
.box
 {
		width: 250px;
		height: 142px;
		margin-bottom: 5px;
	}
	
div.hr
 {
		clear: both;
		height: 1px;
  margin-top: 5px;
		margin-bottom: 20px;
  background: #000;
 }
	
div.hr hr 
 {
  display: none;
 }	

.foto_h1_links
 {
		float:left;
		margin: 0 7px 25px 0;
	}
	
.foto_h1_rechts
 {
		float:right;
		margin: 0;
	}
	
#sound
 {
		position: absolute;
		top:5px;
		left:775px;
	}
/* ++++++++++ ENDE LAYOUT ++++++++++ */


/* ++++++++++ TEXTFORMATIERUNGEN ++++++++++ */
h1
 {
		font-size: 12px;
		line-height: 16px;
		font-weight: normal;
	}
	
h2
 {
		font-size: 12px;
		line-height:12px;
		font-weight:bold;
	}
	
h3
 {
		font-size: 12px;
		line-height:12px;
		font-weight:bold;
		margin:25px 0 15px 0;
	}	
	
p
 {
		font-size:12px;
		line-height:16px;
		margin-bottom:11px;
	}
	
a
 {
		font-family: Tahoma, Arial, sans-serif;
		font-size:12px;
		line-height:16px;
		color: #801313;
		text-decoration: none;
	}
	
a:hover
 {
		text-decoration: none;
	}
	
.klein
 {
		font-size: 10px;
		line-height: 12px;
	}
/* ++++++++++ ENDE TEXTFORMATIERUNGEN ++++++++++ */


/* ++++++++++ SCROLLBAR ++++++++++ */
.jScrollPaneContainer {
		position: relative;
	 overflow: hidden;
 	z-index: 1
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height:100%;
 background: #E7E7E7;
}

.jScrollPaneDrag {
	position: absolute;
	background: #E7E7E7;
	cursor: pointer;
	overflow: hidden;
}

.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}

.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	height: 15px;
	background: url(../_bilder/hoch.png) bottom no-repeat;
}

a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	height: 15px;
	background: url(../_bilder/runter.png) bottom no-repeat;
}

a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}

a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}
/* ++++++++++ ENDE SCROLLBAR ++++++++++ */


/* Easy Slider */

#slider
 {
		float:left;
	}

	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider, #slider li{ 
		/* 
			define width and height of container element and list item (slide)
			list items must be the same size as the slider area
		*/ 
		width:310px;
		height:230px;
		overflow:hidden; 
		}
	span#prevBtn{position:absolute;top:230px;left:0px;}
	span#nextBtn{position:absolute;top:230px;left:12px;}					

/* // Easy Slider */


/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1500;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2000;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}



/* ++++++++++ FORMULAR-FORMATIERUNGEN ++++++++++ */
#kontakt_formular
 {
	 width:290px;

	}
		
#kontakt_formular fieldset 
 {
		color:#403E42;
	 margin-bottom: 8px;
	 font-size:10px;
 	line-height:14px;
 }

#kontakt_formular input, #kontakt_formular select
 {
		height:16px;
		width:150px;
		font-family: Tahoma, Arial, sans-serif;		
		font-size:12px;
		padding:2px 1px 1px 3px;
		margin-bottom:5px;
		vertical-align:middle;
		color:#FFFFFF;
		background:#801313;
		border: none;
 } 
	
#kontakt_formular .input_aktiv
 {
	 background:#403E42;
		color:#ffffff;
	}
	
#kontakt_formular .input_aktiv_button
 {
	 background:#403E42;
		color:#ffffff;
		width:229px;
		height:24px;
	}	

#kontakt_formular label 
 {
	 display:block;
		float:left;
		width:75px;
		margin:3px 0;
		font-size:12px;
		line-height:12px;
		color:#403E42;
	}
	
textarea
 {
	 width:225px;
		height:70px;
		font-size:12px;
	 font-family:Tahoma, sans-serif;
		color:#FFF;
		margin-top:0px;
		margin-bottom:5px;
		padding:2px 1px 1px 3px;
		background:#801313;
		border: none;
	}		

#kontakt_formular p 
 {
		font-size:10px;
		line-height:12px;
		color:#403E42;
		margin-bottom: 25px;
 }
	
#kontakt_formular .button
 {
		width:229px;
		height:24px;
		font-family:Tahoma, sans-serif;
		font-weight:bold;
  font-size:12px;
		color:#FFF;
		background:#801313;
		border:0;
	}
	
#kontakt_formular .checkbox
 {
		width: 12px;
		background: none;
	}
/* ++++++++++ ENDE FORMULAR-FORMATIERUNGEN ++++++++++ */


/* ++++++++++ TICKER ++++++++++ */
#mqTicker
 {
  position:absolute;
		overflow:hidden;
		top: 405px;
		left:0;
		height:20px;
		width:760px;
		margin-left:20px;
	}
	
#mqNews
 {
  white-space:nowrap;
		position:absolute;
		height:25px;
		margin-bottom:25px;
		font-size:12px;
		line-height:16px;
		color:#5F1216;		
	}
	
#mqNews a
 {
  font-size:12px;
  font-weight:bold;
  line-height:16px;
		color:#5F1216;
		text-decoration:none;
	}		
/* ++++++++++ ENDE TICKER ++++++++++ */