/*************************/
/* Architekturgrafik     */
/* September 2009        */
/* Website Friewald      */
/*************************/

/***********************/
/* ALLGEMEIN + WRAPPER */
/***********************/

*  {padding:0; margin:0;}
ul ul {margin-bottom:0;} 
html {height: 101%;}

* html {height:1%;}


body { 
   color:#CCCCCC; 
   background-color:black; 
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:10px; 
   text-align:left;
}

p {
	margin-bottom:11px;
	line-height:16px;
}

h1 {
	font-size: 15px;
	margin-bottom: 20px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#cccccc;
} 

h2 {font-size: 14px;}
h3 {font-size: 13px;}

a {text-decoration:none; outline:none; color:#cccccc;}
 
#wrapper { 
   background:black;
   width: 960px;  
   margin-left: auto;
   margin-right: auto;
   margin-top:0px;
   margin-bottom:0px;
}

.abstand {
	padding-bottom:20px;
}

.hellgruen {
	color:#a5d29f;
}

/**********/
/* HEADER */
/**********/

#header {
	background:black url(images/hg_header.jpg) top left no-repeat;
	height:250px;
}

/*************************/
/* NAVIGATION HORIZONTAL */
/*************************/

#navigation {
	background:black url(images/hg_navigation.jpg) top left no-repeat;
	height:30px;
}

#navigation ul {
	padding-top:8px;
	text-align:center;
}

#navigation li { 
    display: inline; 
    list-style-type: none; 
    padding: 0 24px 0 24px;    /* Abstand zw Menüpunkten */
}

#navigation a {
	letter-spacing:1px;			/* Abstand zwischen Buchstaben */
}

#navigation a:hover, a:focus {
	color:#669966;
}

#navigation a:active {
	color:#cccccc;
}

/********/
/* LEFT */
/********/

#left { 
   float: left; 
   width: 190px; /* Gesamt 200 px */
   padding-left: 0px; 
   padding-right: 10px;
   padding-top: 40px; 
   padding-bottom: 10px;
}

#left ul {
}

#left li {
	list-style-type:none;
	margin-bottom:20px;
}

#left a {
	color:#a5d29f;
}

#left a:hover, a:focus {
	color:#669966; /* #7fbe6f; */
}

#left a:active {
	color:#cccccc;
}

/*********/
/* RIGHT */
/*********/

#right {  
   float: right;  
   width: 200px; /* Gesamt 200 px */
   padding-right: 0px;
   padding-left: 0px;
   padding-top:40px;
   padding-bottom:10px;
}

/**********/
/* CENTER */
/**********/

#center { 
	margin-left:200px;
	margin-right:200px;
	padding-top:40px;
	padding-bottom:10px;
	padding-left:70px;
	padding-right:70px;
}

#center a {
	text-decoration:underline;
	color:#CCCCCC;
}

#center a:hover, a:focus {color:#669966;}

#center a:active {color:#a5d29f;}

/**********/
/* FOOTER */
/**********/

#footer {
	clear:both;
	color:#a5d29f;
	font-size:9px;
	background:black;
	height:30px;
	padding: 20px 0px 0px 0px;
}

/*************/
/* SPRINGBOX */
/*************/

#springbox {}

/***********/
/* GALERIE */
/***********/

#bilder {
	position:relative;
		width:200px;		/*zeigt die Bilder im IE6 an*/
}

ul#galerie { 
float: left;
width: 200px;
padding: 0px 0px 0px 0px; 
background-color: black; 
border: 0px solid #996600;
}

ul#galerie li,
ul#galerie h3,
ul#galerie p {
	display: inline;
}

ul#galerie h3 img { 
position: absolute; 
padding: 0px;
height: 105px; 
width: 140px;
border: 0px solid #ccc; 
} 

li#bild1 h3 img {top: 0px; left: 60px;}
li#bild2 h3 img {top: 108px; left: 60px;}
li#bild3 h3 img {top: 216px; left: 60px;}

ul#galerie a:hover img { 
z-index: 100; 
width: 200px; 
height: 150px;
padding: 0px; 
background-color: #fff; 
border: 0px solid #333; 
}

li#bild1 h3 a:hover img {top: -30px; left: 30px;}
li#bild2 h3 a:hover img {top: 80px; left: 30px;}
li#bild3 h3 a:hover img {top: 180px; left: 30px;}

999