@charset 'utf-8';
/**
 * XXX Project Name
 *
 * (en) Screen layout for 
 * (de) Bildschirmlayout f�r 
 *
 * @project 		xxx-xxx.de
 * @copyright       Copyright 2010, Bastian Fritsch
 * @link            http://www.bastian-fritsch.de
 * @copyright 		2010 by the author 
 * @cssdoc 			version 1.0-pre 
 * @version         0.1
 * @revision        $Revision:01 $
 * @lastmodified    $Date: 2010-10-22 18:44:05 +0100 (Di, 06. Apr 2010) $
 */


/*------------------------------------------------------------------------------------------------------*/

/**
* Reset und Standardeigenschaften
*
* (de) die wichtigsten Standardeigenschaften werden dem CSS mitgegeben DO NOT CHANGE !!!
*
* @section		Reset und Standardeigenschaften
*/

*{margin:0;padding:0;}
	
	/** 
	* (de) Scrollbalken f�r alte Browser erzwingen 
	*
	* @css-for all
	* @valid CSS2
	*/
	html {height: 100%;}
	body {height: 101%;}
	
	/** 
	* (de) Erzwingen vertikaler Scrollbalken in IE8, Firefox, Webkit & Opera 
	*
	* @workaround
	* @affected IE8, FF, Webkit, Opera
	* @css-for all
	* @valid CSS3
	*/
	body { overflow-y:scroll; }
	
	/** 
	* (de) Schriftgroesse wird auf 62.5% gesetzt
	*
	* @affected all
	* @css-for all
	* @valid CSS2
	*/
	body { font-size:62.5%;line-height:1.4; }
	
	/** 
	* (de) Entfernt den rahmen bei bildern der durc hl inks verursacht wird
	*
	* @affected all
	* @css-for all
	* @valid CSS2
	*/
	a img{
		border:0;
	}
	
	a{
		outline:none;
	}
	a:link, a:visited{
		color:#517655;
	}
	a:hover,a:focus{
		color:#1f1e21;
	}
	
	ul{
		list-style:none;
		margin-bottom:1em;
	}
/*------------------------------------------------------------------------------------------------------*/

/**
*  HTML Elemente
* (de)	HTML Elemente
*
* @section		HTML Elemente
*/
body{
	background:url(/pics/website/bg2.jpg) repeat;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

	
}

h1 {
	font-size:1.4em;
	font-weight:100;
	text-transform:uppercase;
	
}
	h1 a{
		display:block;
		float:left;
		height:2.5em;
		padding:0 1em 0 0;
		color:#fff;
		
		text-decoration:none;
	}
h2{
	font-size:1.2em;
	font-weight:100;
}
	h2 a:link,h2 a:visited{
		text-decoration:none;
		
	}
	h2 a:hover{
		text-decoration:underline;
	}
p{
	margin-bottom:1em;
}
a{
	color:#517655;
}


a img{
	border:0;
}

table{
}

	table td{
		vertical-align:top;
	}
	table th{
		text-align:left;
	}


/*------------------------------------------------------------------------------------------------------*/

/**
* @section base layout | Basis Layout
* (de)	Webseiten Struktur, ID's und Klassen die der Webseite Struktur geben
*		der header wird absolut positioniert und aus dem zentrierten content herausgenommen
*		damit das Bild immer zentriert wird.
*
* #wrapper
* |-------------------------------|
* | #header                       |
* |-------------------------------|
* | 			                  |
* |  |-------------------------|  |
* |  | #section  			   |  |	
* |  |               		   |  |
* |-------------------------------|
* | #footer                       |
* |-------------------------------|
*
*/
div#wrapper{
	width:800px;
	margin:0 auto 0  auto;
	
}
div#header {
	margin-bottom:2em;
	
}

div#section,div#header{
	/*background-color: rgba(255, 255, 255, 0.5);*/
	background:#fff;
	 -webkit-box-shadow: 5px 5px 5px #666666;
    -moz-box-shadow: 5px 5px 5px #666666;
    box-shadow: 5px 5px 5px #666666;
	padding:2em 1em 2em 1em;
}
div#section {
	background:#fff;
	font-size:1.2em;
	min-height:400px;
}


div.twoCols div.article{
		float:left;
		width:650px;
		position:relative;
		
		text-align:right
	}
	div.twoCols div.aside{
		width:100px;
		margin:0 0 0 650px;
		padding:0 0 0 2em;
		height:auto;
		text-align:right;
		overflow:hidden;
		
	}
	


div.mitAtelier{
	background:url(/pics/webside/thumb/atelier_lambertus.jpg) no-repeat !important;
}
div.whiteAtelier{
	background:url(../pics/webside/thumb/atelier_lambertus_white.jpg);
	background-repeat:repeat-y;
}


 
/*------------------------------------------------------------------------------------------------------*/

/**
* Navigation
*
* (de)	
*
* @section		Navigation
*/

#header ul{
	list-style:none;
	font-size:1.2em;
}
#header a:link,#header a:visited{
	text-decoration:none;
	color:#000;
	letter-spacing: .1em;
	white-space:nowrap 
}
#header a:hover,#header a:focus{
	color:#517655;
}

	#header a.aktiv{
		color:#517655;
	}


#header ul{
	float:right;
	width:100px;
	margin-left:30px
}


	

/*------------------------------------------------------------------------------------------------------*/

/**
* Individuelle Styles
*
* (de)	
*
*
*/
	/* installation üversicht */
	div#preview{
		background:#fff;padding:5px;
		position: absolute;
		border: 1px solid #777;
	}
	/**
	* @subsection bio
	*/
	table.tablebio{
		width:100%;
		margin-bottom:1.5em;
	}
	table.workshop{
		
	}
	
	td.tableleft{
		width:18%;
	}



	/**
	* @subsection scrollbutton bei arbeiten
	*/
	/* die scrol button zum nxten bildn*/
	ul#scroll{
		list-style:none;
		margin-top:2em;
		height:17px;
		margin-bottom:2em;
	}
	ul#scroll *{
		display:block !important;
		float:right;
		margin-left:.6em;
		width:12px;
		height:17px;
		margin-right:.4em;
		text-indent:119999px !important;
		
	}
	span.scrollBwdOf{
		background:url(/pics/website/scrollBwdN.png);
	}
	span.scrollFwdOf{
		background:url(/pics/website/scrollFwdN.png);
	}
	a.scrollBwd{
		background:url(/pics/website/scrollBwd.png);
	}
	a.scrollFwd{
		background:url(/pics/website/scrollFwd.png);
	}


	/**
	* @subsection jahr liste bei arbeiten
	*/
	
	ul#year{
		list-style:none;
		font-size:1.2em;
		margin-right:.4em;
	}
	ul#year a:link,ul#year a:visited{
		text-decoration:none;
		color: #000 !important;
	}
	ul#year a:hover{
		color:#517655;
	}
	ul#year a.section:link,ul#year a.section:visited{
		color:#000;
	}
	ul#year a:hover, ul#year a:focus{
	}

	ul#year a.aktiv{
		color:#517655 !important;
	}
	/*
	* @subsection bildunterschriften bei acrylglas, fototapete etx
	*/
	dl.bilderloop dd{
		font-size: .9em;
		color: #777777;
		padding-top: .5em;
	}

	/**
	* @subsection projekte
	*/
	ul.projekteloop{
	list-style:none;
	}
	.projekteloop li{
		
		float:left;
		text-decoration:none;
		
	}
	.projekteloop li a img{
		border:1px solid #fff;
		margin: 0 5px 10px 0;
	}
	.projekteloop li a:hover img{
		border:1px solid #000;
	}
	
	/**
	*
	* @subsubsection betonale
	*/
	/*************************************************hintersübhcen *******************/
#bessling{
	font-weight:100;
	font-size:.8em;
}
/***********************************************************************betonale **********************************/
dl#sph, dd a:focus, dd a:hover, dd a:active {
background: url(../pics/installationen/original/lambertus_betonale_grundriss.gif);
}

dl#sph {
border: 2px solid;
height: 376px;
position: relative;
width: 500px;
color:#FFFFFF;
margin:1em auto;
}

dl#sph dt {
display: none;
}

dl#sph dd {
position: absolute;
}

dd#weide {
height: 65px;
left: 62px;
top: 22px;
width: 263px;
}

dd#weide a:focus, dd#weide a:hover, dd#weide a:active {
	background: url(../pics/installationen/original/lambertus_betonale_weide_hover.gif);
}

dd#acker {
height: 143px;
left: 63px;
top: 72px;
width: 123px;
}

dd#acker a:focus, dd#acker a:hover, dd#acker a:active {
	background: url(../pics/installationen/original/lambertus_betonale_acker_hover.gif);
}

dd#fontaene {
height: 55px;
left: 63px;
top: 227px;
width: 47px;
}

dd#fontaene a:focus, dd#fontaene a:hover, dd#fontaene a:active {
	background: url(../pics/installationen/original/lambertus_betonale_fontaine_hover.gif);
}

dd#winterg {
height: 128px;
left: 195px;
top: 86px;
width: 125px;
}

dd#winterg a:focus, dd#winterg a:hover, dd#winterg a:active {
	background: url(../pics/installationen/original/lambertus_betonale_winterg_hover.gif);
}

dd#sp {
height: 247px;
left: 329px;
top: 17px;
width: 127px;
}

dd#sp a:focus, dd#sp a:hover, dd#sp a:active {
	background: url(../pics/installationen/original/lambertus_betonale_sp_hover.gif);
}

dd#st {
height: 81px;
left: 59px;
top: 274px;
width: 130px;
}

dd#st a:focus, dd#st a:hover, dd#st a:active {
	background: url(../pics/installationen/original/lambertus_betonale_st_hover.gif);
}

dd#ow {
height: 89px;
left: 329px;
top: 267px;
width: 125px;
}

dd#ow a:focus, dd#ow a:hover, dd#ow a:active {
	background: url(../pics/installationen/original/lambertus_betonale_ow_hover.gif);
}





dl#sph dd a {
color: #FFF !important;
display: block;
height: 100%;
text-decoration: none;
width: 100%;
}

dl#sph dd a span {
background: #000;
cursor: pointer;
border: 2px solid;
padding: .5em;
position: absolute;
}
div#sopg ul.move{
	/*display:none;*/
}
div#sopg ul{
	margin-top:1em;
}
div#sopg h4{
	clear:left;
}
	/**
	*
	* @subsection bio
	*/
	.biof{
		margin-left:50px;
	}
	
	table.projInsta{
		width:100%;
	}
	
/*------------------------------------------------------------------------------------------------------*/

/**
* Allgemeine Regeln
*
* (de)	Allgemeine Regeln
*
* @section		allg.Regeln
*/

	/**
	* @abstände u.a. startseite head nach oben
	*/
	.headTextTop{
		margin-top:3em !important;
	}
	
	.gor{
		margin-left:1em;
	}

	/**
	* @subsection clearing methods
	*/
	
	.clearL{clear:left;}
	.clearR{clear:right;}
	.clear{clear:both;}
	
	/* (en) clearfix method for clearing floats */
	/* (de) Clearfix-Methode zum Clearen der Float-Umgebungen */
	.clearfix:after {
	clear:both;
	content:".";
	display:block;
	font-size:0;
	height:0;
	visibility:hidden;
	}
	
	/* (en) essential for Safari browser !! */
	/* (de) Diese Angabe ben�tigt der Safari-Browser zwingend !! */
	.clearfix { display:block; }
	
	/* (en) alternative solution to contain floats */
	/* (de) Alternative Methode zum Einschlie�en von Float-Umgebungen */
	.floatbox { overflow:hidden; }
	
	/* (en) IE-Clearing:Only used in Internet Explorer, switched on in iehacks.css */
	/* (de) IE-Clearing:Ben�tigt nur der Internet Explorer und �ber iehacks.css zugeschaltet */
	#ie_clearing { display:none; }


	


	/**
	* @subsection hidden elements | Versteckte Elemente
	*
	* (de) Skip-Links und versteckte Inhalte
	*/
	
	/* (en) classes for invisible elements in the base layout */
	/* (de) Klassen f�r unsichtbare Elemente im Basislayout */
	.skip, .hideme, .print {
		position:absolute;
		top:-32768px;
		left:-32768px; /* LTR */
	}
	
	/* (en) make skip links visible when using tab navigation */
	/* (de) Skip-Links f�r Tab-Navigation sichtbar schalten */
	.skip:focus, .skip:active {
		position:static;
		top:0;
		left:0;
	}
	
	/* skiplinks:technical setup */
	#skiplinks { 
		position:absolute;
		top:0px; 
		left:-32768px; 
		z-index:1000; 
		width:100%;
		margin:0; 
		padding:0; 
		list-style-type:none;   
	}
	
	#skiplinks a.skip:focus,
	#skiplinks a.skip:active {
		left:32768px; 
		outline:0 none;
		position:absolute; 
		width:100%;
	}  
	
	/**
	* @subsection vcard
	*/
	.vcard{
		float:right;
		text-align:right;
		margin:0 0 2em 0;
		font-size:1.2em;
		width:610px;
	}
	.vcard .tel{
		margin-top:1em;
	}
	.vcard .e-mail{
		margin-bottom:1em;
	}