/*  

Description: Stylesheet für typolight atelier interaktiv
Version: 1.0
Author: Andreas Linder
Author URl: http://www.atelierfuergestaltung.eu

*/




/*Farben:

ai-gruen (Hintergründe):  #c8d215
dunkel-gruen (Schrift):  #858a0c

grau:     #717171

*/





/*:::::::::::::::::: 
Allgemeines Styling  
:::::::::::::::::::*/


body {
	text-align:center;
	margin:0;
	padding:0;
	background:#999 url(../images/background/bg_wood.jpg);
	font-family:Helvetica, Arial, sans-serif;
	color:#000;
	font-size:12px;
}


html[xmlns^="http"] {
			/* blendet leeren Scrollbalken immer ein
			 * > Firefox 1.5 und Safari
			 */
			overflow-y: scroll;
}
			
			


p, ul, li, dl, dt, dd, h1,h2,h3 {
	padding:0;
	margin:0;
}



p, ul, li, dl, dt, dd{
	font-size:14px;
	line-height:20px;
	padding-bottom:1em;
	padding-left:36px;
	padding-right: 36px;

}







a:link,
a:visited,
a:hover,
a:active{
	text-decoration:none;
	color:#858a0c;
}

a:hover{
	color:#717171;
}


a:focus,
#accordion h1{
	outline:none;
}


h1 {
	
	color:#FFF;
	font-size:18px;
	letter-spacing:0.09em;
}

	


h2 {
	
	color:#858a0c;
	font-size:24px;
	letter-spacing:0.09em;
	padding-bottom:15px;
	padding-left: 36px;
	padding-right: 36px;
}




h3 {
	
	color:#000;
	font-size:18px;
	letter-spacing:0.09em;
}


h4 {
	
	color:#858a0c;
	padding-left:36px;
	font-size:14px;
	letter-spacing:0.09em;
}






	




/*::::::::::::::::::::::::: 
Klassen und id
:::::::::::::::::::::::::*/

.gap {
	padding-bottom:20px;
}
.biggap {
	padding-bottom:40px;
}


.clear {
	clear:both;
}












/*::::::::::::::::::::::::: 
Navigation_1 
:::::::::::::::::::::::::*/

#Navigation_1 ul{
	padding:0;
	margin:0;
	list-style-type:none;
	margin-top:10px;
	margin-left:100px;

}

#Navigation_1 li{
	padding:0;
	margin:0;
	float:left;
	width:130px;
}


#Navigation_1 li.first,
#Navigation_1 li a{
	width:145px;
	
}

  

#Navigation_1 li,
#Navigation_1 li a{
	color:#000;
	font-size:16px;
	font-weight:bold;
}





#Navigation_1 li a:hover{
	color:#717171;
}






/*::::::::::::::::::::::::: 
Betweenbox und Gallerien
:::::::::::::::::::::::::*/

body.leistungen #Betweenbox,
body.projects #Betweenbox{
	display:none;
}


/*#Betweenbox div{
		width:1000px;
		/*height:120px;*!/
		height:70px;
		margin: 6px 12px 12px 6px;
		background: url(../images/background/pattern_cross_wht.png) repeat;
		text-align:center;
		padding-top:50px
}*/

#Betweenbox{
	position:relative;
	padding-left: 6px;
	padding-top: 6px;
	
}


.pics { 
height: 120px; 
width: 1000px; 
padding:0; 
margin:0; 
overflow: hidden }

.pics img {
position:absolute;  
height: 120px; 
width: 1000px; 
padding: 0; 
top:6px; 
left:6px; }


#slideshow {  
height: 120px;
width: 1000px; 
}




#nav { 
z-index: 50; 
position: absolute; 
bottom: 10px; 
right: 35px; }

#nav a { 
margin: 0 5px; 
padding: 3px 5px; 
background: #fff;
font-size: 9px; 
text-decoration: none }

#nav a.activeSlide { 
background: #c8d215;
color: #fff ;
border: solid 1px #fff;
 }
 
 
 







/*#Betweenbox .mask{
	position:absolute;
	z-index:1;
}*/

/*#Betweenbox .mask1 img{
	position:absolute;
	left: 0px;
}*/

/*#Betweenbox .buttons{
	position:absolute;
	z-index:2;
	top: 1px;
	left: 1px;
}	*/

/*#Betweenbox #prev1{
	width:30px;
	height:120px;
	display:block;
	float: left;
	background: url(../images/background/arrow-left-carousel.gif) no-repeat;
}	*/

/*#Betweenbox #next1{
	width:30px;
	height:120px;
	display:block;
	margin-left: 970px;
	background: url(../images/background/arrow-right-carousel.gif) no-repeat;
}*/
	
/*#Betweenbox div h1{
	font-size:26px;
}*/


/*::::::::::::::::::::::::: 
Tooltip
:::::::::::::::::::::::::*/



/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
	z-index: 50;
	display:none;
	background:transparent url(../images/background/tooltip-green-bg.png);
/*	background:transparent url(../images/background/tooltip_small_bg.png);*/
	font-size:16px;
	height:70px;
/*	height:30px;*/
	width:160px;
	padding:25px;
	/*text-align: center;*/
	color:#fff;	
}

.tooltip p{
	padding: 0;
}



.tooltip a {
	color:#fff;
	/*padding-left: 20px;*/
}


/* style the trigger elements */
#ViewImages {
	border:0;
	cursor:pointer;
	margin:0 8px;
}





/*::::::::::::::::::::::::: 
Content  & Sidebar
:::::::::::::::::::::::::*/


/*#SideBarInside div div div{
	overflow: hidden;
	width: 100%;
}*/


#SideBar img{
	display: block;
	float: left;
	border: 1px solid #333;
	margin-right: 10px;
	margin-bottom: 10px;
	
}

.home #SideBar p{
	height: 80px;
}












#Content ul li,
#SideBar ul li{
	list-style-position:inside;
	list-style-type:none;
	background:url(../images/background/dot_green_small.png) no-repeat 0 6px;
	padding-left:15px;
	margin-left: 2px;
}



#SideBar h1  {
	margin-bottom:20px;
	background:url(../images/background/pattern_cross_green.png);
	padding-top: 30px;
	/*padding-bottom: 14px;*/
	
}


h1 span{
	display: inline-block;
	font-size:18px;
	letter-spacing:0.09em;
	background:#c8d215;
	margin-right:15px;
	padding-left:36px;
	padding-right:20px;
	padding-top:3px;
	padding-bottom:3px;
	margin-bottom: 20px;
}



#SideBar h2  {
	padding-top: 0;
	padding-left:36px;
	
}

.projects #SideBar h2  {
	padding-top: 30px;
	
}



#SideBar h1 span{
	background:#c8d215;
	margin-right:-56px;
	padding-left:36px;
	padding-right:20px;
	padding-top: 4px;
	padding-bottom: 3px;
	
}
	











/*::::::::::::::::::::::::: 
Content 
:::::::::::::::::::::::::*/


/* Accordion*/

	


#accordion a span.accordionSpan{
	display: inline-block;
	font-size:18px;
	letter-spacing:0.09em;
	background:#c8d215;
	margin-right:15px;
	padding-left:36px;
	padding-right:20px;
	padding-top:3px;
	padding-bottom:3px;
	margin-bottom: 15px;
}








	


	
 a.ui-state-default{
 	display: inline-block;
	background:url(../images/background/arrow-right1-grey.png) no-repeat 100% 20%;
	color:#717171;
}
	
	
 a.ui-state-active{
	background:none;
	color:#fff;
}










#Content h2,
#Content h3{
	padding-left:36px;
}



#accordion  p{
		padding-right:120px;
}


.leistungen #accordion  img{
	float: left;
	padding-right: 10px;
	padding-left: 36px;
}













/* Projects*/
#ViewProject{
	height:18px;
	margin-bottom:30px;
}


.projectsImageview #ViewImages{
	float:left;
	margin-left:36px;
	width:150px;
	height:18px;
	background:url(../images/background/icon_projectview_images_on.gif) no-repeat left;
}


.projectsImageview  #ViewImagesText{
	float:left;
	margin-left:10px;
	width:150px;
	height:18px;
	background:url(../images/background/icon_projectview_image_text_off.gif) no-repeat left;
}

.projectsImageTextview #ViewImages{
	float:left;
	margin-left:36px;
	width:150px;
	height:18px;
	background:url(../images/background/icon_projectview_images_off.gif) no-repeat left;
}


.projectsImageTextview  #ViewImagesText{
	float:left;
	margin-left:10px;
	width:150px;
	height:18px;
	background:url(../images/background/icon_projectview_image_text_on.gif) no-repeat left;
}




#ViewImages a{
	display:block;
	width:27px;
	height:18px;
}
#ViewImagesText a{
	display:block;
	width:37px;
	height:18px;
	
}



#ProjectsImageview{
	margin-top:22px;
	margin-left:36px;
}

#ProjectsImageview .ce_gallery{
	display:inline;
	position:relative;
	float:left;
	margin-right:16px;
	margin-bottom:36px;
}








/*Gallery*/

.ce_gallery{
	 display: inline;
}



.projectsImageview .ce_gallery {  
width:   290px;
height:  170px; 
padding: 0;  
margin:  0; 
cursor:  pointer;
border:  solid 1px #000; 
} 


.projectsImageview .ce_gallery img {  
width:   290px;
height:  170px; 
} 







/* Projects - 2Column - Layout*/

#ProjectsImageTextview img{
	width:   290px;
	height:  170px; 
	margin-top:20px;
	margin-left:36px;
	border:  solid 1px #000;
}


#LeftColumn{
	float:left;
	width:345px;
	background: url(../images/background/pattern_cross_green.png);
	/*padding-bottom:36px;*/
}

#RightColumn{
	float:right;
	width:300px;
	
}


/*Buchnavigation*/

#BackForwardNav{
background-color: #fff;	
margin-top: 20px;
padding-top: 10px;
padding-bottom: 10px;
}

#Content #BackForwardNav ul{
	list-style-type:none;
	/*padding-left: 0;*/
	padding-right: 0;
	padding-bottom: 0;
	
}

#Content #BackForwardNav li{
	display:inline;
	list-style-type:none;
	background: none;
	padding-left: 0;
	padding-right: 0;
}

#Content #BackForwardNav .up{
	display:none;
}

#BackForwardNav .prev a{
	float:left;
	padding-left:20px;
	background:url(../images/background/arrow-left1-grey.png) no-repeat left;
}

#BackForwardNav .next a{
	float:right;
	padding-right: 20px;
	background:url(../images/background/arrow-right1-grey.png) no-repeat right;
}

#Content ul li.empty{
	list-style-type:none;
	background: none;
}


.firstProject #Content #BackForwardNav .prev{
	display:none;
}







/*::::::::::::::::::::::::::*/ 
/*Seiten-Suche                   */
/*:::::::::::::::::::::::::.*/

#SiteSearch{
/*display: none;*/
padding-left: 36px;
padding-bottom: 10px;
}


#SiteSearch input.search_input{
	width: 175px;
	height: 20px;
	margin-left: 36px;
	margin-bottom: 20px;
}


#SiteSearch .submit_container input{
/*	background:url(../images/background/search_btn.gif)  no-repeat ;*/
	width: 180px;
	height: 27px;
	border: none;
	margin-left: 36px;
	margin-bottom: 20px;
}


#SearchOutput p.header{
	font-size: 18px ;
	color: #858a0c
}


#SearchOutput form{
	margin-left: 36px;
	margin-bottom: 36px;
}



p.url{
	color: #717171;
	font-style: italic;
}



/*::::::::::::::::::::::::::*/
/*Footer                    */
/*::::::::::::::::::::::::.:*/

#Footer ul{
	list-style-type:none;
	padding-left:0;
}
#Footer li{
	float:left;
	margin: 0;
	padding: 0;
	padding-top:2px;
	padding-bottom:2px;
	padding-right:10px;;
	
}



#Footer a {
		color:#fff;
}
	
#Footer a:hover {
		color:#858a0c
}




/*::::::::::::::::::::::::::*/
/*Sitemap                   */
/*::::::::::::::::::::::::.:*/

#Content .mod_sitemap ul li{
	margin-right: 36px;
	list-style-type:  none;
	background:none;
	padding-left: 0;
	padding-top: 5px;
	border-top: 10px solid #c8d215;
	font-size: 20px;
	}
	
	#Content .mod_sitemap ul ul{
		 margin-top: 20px;
		}
	
	#Content .mod_sitemap ul li li{
		border-top: 6px solid #c8d215;
		padding-top: 2px;
		font-size: 16px;
		}	
		
		#Content .mod_sitemap ul ul ul{
			 margin-top: 40px;
			}
		#Content .mod_sitemap ul li li li{
			border-top: 2px solid #c8d215;
			padding-top: 0;
			font-size: 12px;
			}		






/*::::::::::::::::::::::::::::*/
/*Styling der Layoutbereiche*/
/*::::::::::::::::::::::::::::*/

#Wrapper {
	position:relative;
	text-align:left;
	margin-right: auto;
	margin-left: auto;
	width:1018px;
}





#Header {
	float:left;
	height:82px;
	width:1018px;
	background:url(../images/background/shadow_header_bg.png);
}



#Logo {
	float:left;
	height:70px;
	width:190px;
	background:#c8d215  url(../images/background/logo_ai.gif);
	margin-left:6px;
}

	#Logo a {
		display:block;
		height:70px;
		width:190px;
	}


#Navigation_1 {
	float:left;
	height:70px;
	width:810px;
	/*background:#fff;*/
}


#Betweenbox {
	float:left;
	width:1018px;
	height:138px;
	background:url(../images/background/shadow_inbetweenbox_bg.png);
}



#Main{
	float: left;
	width:680px;
}


	

		#Content {
				  float:left;
				  width:680px;
		}
		
			  #ContentTop {
				  float:left;
				  width:680px;
				  height:6px;
				  background:url(../images/background/shadow_content_top.png);
			  }
			  
			  #ContentInside {
				  float:left;
				  width:661px;
				  min-height:380px;
				  padding-left:6px;
				  padding-right:12px;
				  background:url(../images/background/shadow_content_middle.png) repeat-y;
			  }
			  
			  #ContentBottom {
				  float:left;
				  width:680px;
				  height:12px;
				  background:url(../images/background/shadow_content_bottom.png);
			  }


#Side{
	float: right;
	width:338px;
}


		#SideBar{
				  float:left;
				  width:338px;
		}
		
		
				
/*				.home #SideBar,*/
				.projects #SideBar,
				.atelier #SideBar,
				.sitemap #SideBar,
				.impressum #SideBar,
				.sitemap #SideBar,
				.suchausgabe #SideBar{
					 display: none;
				}
				
			
				

		
		#SideBar_2 {
				  float:left;
				  width:338px;
				  display: none;
		}
			
			
			.atelier #SideBar_2 {
					  float:left;
					  width:338px;
					  display: block;
			}
			
			
			
			
			
		
			  #SideBarTop,
			  #SideBarTop_2{
				  float:left;
				  width:338px;
				  height:6px;
				  background:url(../images/background/shadow_sidebar_top.png);
			  }
			  
			  
			  #SideBarInside {
				  float:left;
				  width:319px;
				  /*min-height:380px;*/
				  padding-left:6px;
				  padding-right:12px;
				  background: url(../images/background/shadow_sidebar_middle.png) repeat-y;
			  }
			  #SideBarInside_2 {
			  	  float:left;
			  	  width:319px;
			  	  min-height:380px;
			  	  padding-left:6px;
			  	  padding-right:12px;
			  	  background:none;
			  }
			  
			  #SideBarBottom,
			  #SideBarBottom_2  {
				  float:left;
				  width:338px;
				  height:12px;
				  background:url(../images/background/shadow_sidebar_bottom.png);
			  }





#Footer {
	/*display:none;*/
	float:left;
	width:1000px;
	height:25px;
	padding-left:6px
}

	

#SideFlip{
	position:absolute;
	z-index:2000;
	background:url(../images/background/kontakt_btn.gif);
	width: 40px;
	height:120px;
	top:88px;
	right:0px;
	cursor:pointer;
	
}

#SideFlip:hover{
	background:url(../images/background/kontakt_btn_over.gif);
	
}


		  #SideFlip #Contact{
			  display:none;
			  position:absolute;
			  top:0px;
			  right:0px;
			  width: 1000px;
			  height:120px;
			  background:#FFF url(../images/background/kontakt_btn_over.gif) no-repeat top left;
			  text-align:left;
			  padding-left:40px;
			  /*border-bottom:#000 solid 2px;*/
			  
		  }
		  
		  #SideFlip #Contact p{
			  float:left;
			  /*padding-top:20px;*/
			  padding-right:40px;
		  }
		  
		 /* #SideFlip #Contact h1{
			  margin-top:3px;
		  }*/