/*************************/
/* CSS Gerlinde Friewald */
/* Architekturgrafik     */
/* Mai 2009              */
/*************************/

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

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

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

p {margin-bottom:15px;}	


h1 {
	font-size:17px;
	margin-bottom:15px;
} 

h2 {
}

h3 {
}

a {text-decoration:none; outline:none;}

ul {list-style:none;}

img {border: 0;}

.abstand {
	padding-bottom:10px;
}

.bildlinks {
	float:left;
	padding-top:10px;
	padding-right:15px;
	padding-left:5px;
}

.bildrechts {
	float:right;
	padding-top:10px;
	padding-left:15px;
	padding-right:5px;
}

.clearing {clear:both;}

.bildunterschrift {
	font-size:9px;
	display: block;
	margin-top:4px;
}


/***********/
/* WRAPPER */
/***********/

#wrapper { 
   background: white url(images/hg_content_3spalt.gif) repeat-y;
   width: 960px;  
   margin-left: auto;
   margin-right: auto;
   margin-top:20px;
   margin-bottom:20px;
}

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

#header {
	background:white url(images/hg_header.gif) top left no-repeat;
	height:190px;
}

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

#navigation {
	background:white url(images/hg_navigation.gif) top left no-repeat;
	height:40px;
}

#navigation ul {
	padding-left:390px;
	padding-top:13px;
}

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

}

#navigation a {
	font-weight:bold;
	color:white;
}

#navigation a:hover {
	color:#ffcc00;
}

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

#left { 
   float: left; 
   width: 165px;		/*Gesamt: x px*/ 
   padding-left: 10px; 
   padding-right: 10px;
   padding-top: 30px; 
   padding-bottom: 20px;
}

#left p {
	color:white;
	line-height:20px;
}

#left h1 {
	color:white;
}

#left a {
	color:white;
	text-decoration:underline;
}

#left a:hover {
	color:#ffcc00;
}
	

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

#right {  
   float: right;  
   width: 550px; 			/*Gesamt x px*/
   padding-right: 20px;
   padding-left: 20px;
   padding-top:30px;
   padding-bottom:20px;
}

#right p {
	color:black;
	line-height:20px;
}

#right h1 {
	color:black;
}

#right a {
	color:black;
	text-decoration:underline;
}

#right a:hover {
	color:#cc0000;
}

#right a:active {
	color:#999999;
}

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

#center { 
	margin-left:185px;
	margin-right:590px;
	padding-top:0px;
	padding-bottom:20px;
	padding-left:0px;
	padding-right:0px;
}

#center ul {
	border-top:1px solid #eeeeee;
}

#center li {
	list-style-type:none;
	border-bottom: 1px solid #eeeeee;
}

#center a {
	text-decoration:none;
	display:block; 				/*ganze Fläche kann angeklickt werden*/
	padding:10px 10px 10px 10px;
	color:black;
}

#center a:hover {
	color:#cc0000;
	background:#999999;
}

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

#footer {
	clear:both;
	background:white url(images/hg_footer.gif) top left no-repeat;
	height:27px;
	padding-left:390px;
	padding-top:18px;
	color:white;
	font-size:9px;
}

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

#right_galerie {
	position:relative;
	width:87px;	/*für IE6, richtige Positionierung des Großbilds*/
}	

.galerie {
	width:87px;
	float:left;
	margin-top:5px;
	margin-bottom:25px;
}

.galerie a img {
	margin-bottom:5px;
	border:1px solid #999999; 
}

.galerie a:hover { /*für IE 6, Anzeige der Großbilder*/
	text-decoration:none;
	border:none;
}

.galerie a:hover img{
	border:1px solid #666666; 
}	

.galerie a span {
	display:none;
	color:#999999;
	text-decoration:none;
}

.galerie a:hover span {
	display:block;
	position:absolute; 
	top:5px; /*ident mit margin-top aus .galerie*/
	left:170px;
	width:273px; /*Breite der Bilder:283, minus 5 von padding left und minus 5 für padding right*/
	padding: 217px 5px 5px 5px; /*217 Abstand Text von oben, 0 von rechts, 5 von unten und links*/
	z-index:100;
	border:1px solid #999999;
	background:white top left no-repeat;
}

/* galerie_1 Autobeschriftungen */
#pic1a:hover span {background-image:url(galerie_1/bild1.jpg);}
#pic1b:hover span {background-image:url(galerie_1/bild2.jpg);}
#pic1c:hover span {background-image:url(galerie_1/bild3.jpg);}
#pic1d:hover span {background-image:url(galerie_1/bild4.jpg);}
#pic1e:hover span {background-image:url(galerie_1/bild5.jpg);}
#pic1f:hover span {background-image:url(galerie_1/bild6.jpg);}

/* galerie_2 Hallenbeschriftungen */
#pic2a:hover span {background-image:url(galerie_2/bild1.jpg);}
#pic2b:hover span {background-image:url(galerie_2/bild2.jpg);}
#pic2c:hover span {background-image:url(galerie_2/bild3.jpg);}
#pic2d:hover span {background-image:url(galerie_2/bild4.jpg);}

/* galerie_3 Klebetexte */
#pic3a:hover span {background-image:url(galerie_3/bild1.jpg);}
#pic3b:hover span {background-image:url(galerie_3/bild2.jpg);}
#pic3c:hover span {background-image:url(galerie_3/bild3.jpg);}
#pic3d:hover span {background-image:url(galerie_3/bild4.jpg);}

/* galerie_4 Objektbeschriftungen */
#pic4a:hover span {background-image:url(galerie_4/bild1.jpg);}
#pic4b:hover span {background-image:url(galerie_4/bild2.jpg);}
#pic4c:hover span {background-image:url(galerie_4/bild3.jpg);}
#pic4d:hover span {background-image:url(galerie_4/bild4.jpg);}
#pic4e:hover span {background-image:url(galerie_4/bild5.jpg);}
#pic4f:hover span {background-image:url(galerie_4/bild6.jpg);}

/* galerie_5 Digitaldruck */
#pic5a:hover span {background-image:url(galerie_5/bild1.jpg);}
#pic5b:hover span {background-image:url(galerie_5/bild2.jpg);}
#pic5c:hover span {background-image:url(galerie_5/bild3.jpg);}

/* galerie_6 Transparente */
#pic6a:hover span {background-image:url(galerie_6/bild1.jpg);}
#pic6b:hover span {background-image:url(galerie_6/bild2.jpg);}

/* galerie_7 Leuchtkästen */
#pic7a:hover span {background-image:url(galerie_7/bild1.jpg);}
#pic7b:hover span {background-image:url(galerie_7/bild2.jpg);}
#pic7c:hover span {background-image:url(galerie_7/bild3.jpg);}
#pic7d:hover span {background-image:url(galerie_7/bild4.jpg);}

/* galerie_8 Textiltransfer */
#pic8a:hover span {background-image:url(galerie_8/bild1.jpg);}
#pic8b:hover span {background-image:url(galerie_8/bild2.jpg);}

/* galerie_9 Sicherheitsschilder */
#pic9a:hover span {background-image:url(galerie_9/bild1.jpg);}
#pic9b:hover span {background-image:url(galerie_9/bild2.jpg);}
#pic9c:hover span {background-image:url(galerie_9/bild3.jpg);}
#pic9d:hover span {background-image:url(galerie_9/bild4.jpg);}
#pic9e:hover span {background-image:url(galerie_9/bild5.jpg);}
#pic9f:hover span {background-image:url(galerie_9/bild6.jpg);}

/* galerie_10 Stadtmöblierung */
#pic10a:hover span {background-image:url(galerie_10/bild1.jpg);}
#pic10b:hover span {background-image:url(galerie_10/bild2.jpg);}
#pic10c:hover span {background-image:url(galerie_10/bild3.jpg);}
#pic10d:hover span {background-image:url(galerie_10/bild4.jpg);}

/* galerie_12 Objektbeschriftungen */
#pic12a:hover span {background-image:url(galerie_12/bild1.jpg);}
#pic12b:hover span {background-image:url(galerie_12/bild2.jpg);}
#pic12c:hover span {background-image:url(galerie_12/bild3.jpg);}
#pic12d:hover span {background-image:url(galerie_12/bild4.jpg);}