/***** LAYOUT.CSS *********************/
/***** BLU°FISH21 *********************/
/**************************************/


/***** COLOURS ************************/
/*
/* 	BLUE		#0082D6
/* 	GRAY		#D7D7D7
/*	DGRAY	#555
/*	ORANGE	#FDA802
/*
/**************************************/


body{
font:0.7em Verdana, Arial, Helvetica, sans-serif;
color:#555;
}

/*Hier ist wichtig das 'margin:auto;' UNBEDINGT vor 'margin-top:4px;' oder andere margin/padding-einstellungen ist*/
#container{
margin:auto;
margin-top:4px;
width:871px;
}

/***** HEADER *****/
#headerContainer{
width:871px;
height:171px;
margin-bottom:4px;
}

	/*Bereich (oben links) für das Blu°fish Logo*/
	#headerLogo{
	width:199px;
	height:171px;
	margin-right:4px;
	float:left;
	}
	
	/*Bereich (oben rechts) für das "Header-Bild"*/
	#headerImage{
	width:668px;
	height:171px;
	float:left;
	}

/***** HEADER END *****/

/***** CONTENT *****/
#contentContainer{
width:871px;
position:absolute;
background:#fff url(../img/faux-middle.gif) repeat-y;	/*faux-effect*/
}

	/*für normales Layout*/
	#contentText{
	width:400px;
	float:left;
	margin:43px 0 60px 130px;
	}
	
	/*für "Projekteliste"*/
	#contentProjects{
	width:500px;
	float:left;
	margin:43px 0 60px 87px;
	}
	
		#contentProjects div{
		width:100%;
		/*height:52px;*/
		margin-bottom:14px;
		clear:left;
		}
		
			#contentProjects img{
			border:1px solid #555;
			margin-right:18px;
			margin-bottom:14px;
			float:left;
			}
			
			/*Abstand zwischen den Absätzen bei 'Projekte'*/
			#contentProjects p{margin-bottom:0.35em;}
			
	/*Siehe ganz unten, für weitere einstellungen, bei GLOBALS*/

a.detail,
a.detail:visited,
a.detail:active{
padding-left:9px;
margin-right:15px;
background:url(../img/icons-detailOFF.gif);
}
	
a.detail:focus,
a.detail:hover{
background:url(../img/icons-detailON.gif);
}
	
a.link,
a.link:visited,
a.link:active{
padding-left:14px;
background:url(../img/icons-linkOFF.gif);
}
	
a.link:focus,
a.link:hover{
background:url(../img/icons-linkON.gif);
}
	
a.mail,
a.mail:visited,
a.mail:active{
padding-left:18px;
background:url(../img/icons-mailOFF.gif);
}
	
a.mail:focus,
a.mail:hover{
background:url(../img/icons-mailON.gif);
}

a.bsp,
a.bsp:visited,
a.bsp:active{
padding-left:6px;
background:url(../img/icons-bspOFF.gif);
}
	
a.bsp:focus,
a.bsp:hover{
background:url(../img/icons-bspON.gif);
}

a.detail, a.detail:visited, a.detail:active, a.detail:focus, a.detail:hover,
a.link, a.link:visited, a.link:active, a.link:focus, a.link:hover,
a.mail, a.mail:visited, a.mail:active, a.mail:focus, a.mail:hover,
a.bsp, a.bsp:visited, a.bsp:active, a.bsp:focus, a.bsp:hover{
background-position:0 4px;
background-repeat:no-repeat;
}
	
#footer{
height:40px;
background-color:#fff;
}

/***** CONTENT END *****/

/***** MENU *****/
#menuContainer{
width:199px;
height:100%;
float:left;
margin-right:4px;
padding-top:48px;
}

	/*Formatierungen für die einzelnen Menübereiche*/
	.menu{margin-bottom:26px;}
	
	.menu div{
	padding:0.05em 0 0.1em 28px;
	margin-bottom:7px;
	background:#D7D7D7;
	font-size:1.2em;
	font-weight:bold;
	color:#fff;
	}
	
	.menu li{padding:0 0 3px 28px;}
	
		.menu a,
		.menu a:visited{
		color:#555;
		text-decoration:none;
		font-weight:normal;
		}
		
		/*Hier steht '.menu a#active' und muss im HTML Quellcode manuel eingetragen werden*/
		/*Dieses dient für die Formatierung des Menüpunktes zur aktuellen Seite*/
		.menu a:focus,
		.menu a:hover,
		.menu a#active{
		color:#FDA802;
		text-decoration:none;
		font-weight:bold;
		}


/***** MENU END *****/

/********** GLOBALS **********/
/*Formatierung von Hauptüberschrift*/
h1{
font-size:1.6em;
color:#0082D6;
margin-bottom:1em;
}

#contentProjects h1{margin-left:120px;}
	
	/*'.shortText' dient zur Formatierung des Textes direkt unter der Überschrift und muss manuell im HTML Quellcode eingetragen werden*/
	.shortText{font-weight:bold;}

	/*'.contentImage' dient zur Formatierung des Bildes der aktuellen Seite und muss manuell im HTML Quellcode eingetragen werden*/
	.contentImage{
	width:400px;
	height:130px;
	border:1px solid #555;
	margin-bottom:.3em;
	}

/*Formatierung von weiteren Überschriften*/
h2{
font-size:1.1em;
font-weight:bold;
color:#0082D6;
margin:34px 0 0.6em 0;
}

/*Formatierung von weiteren Überschriften nur für "Kundenstimmen"*/
h2.voice{
font-size:1em;
font-weight:bold;
color:#555;
margin:34px 0 1em 0;
}

b{font-weight:bold;}

.shortText{margin-bottom:34px;}

p{margin-bottom:1em;}

/*Formatierung von Links im "Inhaltsbereich", nicht für Menüs*/
#contentText a, #contentProjects a,
#contentText a:visited, #contentProjects a:visited,
#contentText a:active, #contentProjects a:active{
text-decoration:none;
color:#0082D6;
}

#contentText a:focus, #contentProjects a:focus,
#contentText a:hover, #contentProjects a:hover{
text-decoration:none;
color:#FDA802;
}

/*Wenn man shadowbox (bei "Projektliste") verwendet, muss man '.hidden' im TAG reinschreiben um zusätzliche bilder im Quellcode zu "verstecken"
-> Siehe Quellcode (z.B. projekte.html)*/
.hidden{display: none;}

/********** GLOBALS END **********/