/* ############################# */
/* # effectlab.de - Startseite # */
/* ############################# */

/* ----------- IMPORTS ---------- */
@import url("startseite_normalize.css"); 

/* ########## LAYOUT ########## */
body { 
	background: #000; 
	margin: 0px;
	padding: 0px;
	}
	
#startseite {
	width:100%;
	height: 280px;
	background: url(../bilder/startseite/back.jpg) repeat-x bottom #fff;
	position: relative;
	top: 190px;
	margin: auto;
	}

/* ########## LISTEN-ELEMENTE ########## */
ul {
	position: relative;
	margin: auto;
	display: block;
	width: 980px;
	top: 40px;
	left: 25px;
	}

ul li {
	float: left;
	width: 188px;
	height: 160px;
	margin: 0 24px 0 0;
	padding: 0 5px 5px 5px;
	display: block;
	}

li p { 
	margin: 75px 0 0 0;
	}

h2 {
	position: absolute;
	background: #ff6101;
	color: #FFFFFF;
	font-family: Arial;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: bold;
	padding: 2px;
	margin: 35px 0 0 40px;
	}
	
h2 a {
	color: #FFFFFF;
	text-decoration: none;
	}

/* ########## MEDIENDESIGN ########## */
#medien { 
	background:url(../bilder/startseite/mediendesign.jpg) no-repeat top left;
	}

#medien:hover { 
	background:url(../bilder/startseite/mediendesign_hv.jpg) no-repeat top left;
	}
	
#medien:hover h2 { 
	background: #444;
	}

/* ########## INTERNETPROJEKTE ########## */
#net { 
	background:url(../bilder/startseite/internetprojekte.jpg) no-repeat top left;
	}
	
#net:hover { 
	background:url(../bilder/startseite/internetprojekte_hv.jpg) no-repeat top left;
	}
	
#net:hover h2 { 
	background: #444;
	}

/* ########## VERANSTALTUNGSSERVICE ########## */
#veranstaltung { 
	background:url(../bilder/startseite/veranstaltungsservice.jpg) no-repeat top left;
	}
	
#veranstaltung:hover { 
	background:url(../bilder/startseite/veranstaltungsservice_hv.jpg) no-repeat top left;
	}
	
#veranstaltung:hover h2 { 
	background: #444;
	text-decoration: none;
	}

/* ########## LINKS ########## */
p a { 
	font-family: Arial; 
	font-size: 11px; 
	font-weight: normal; 
	text-decoration:none; 
	color: #888888;
	}
	
p a:link { 
	color: #888888;
	}
	
p a:hover { 
	color: #444; 
	text-decoration:underline;
	}
	
p a:active { 
	color: #888888;
	}
	
p a:visited { 
	color: #888888;
	}


/* ############ BRANDING-SPALTE - LINKS FUER LISTE ########## */
#branding {
	position: relative;
	width:250px;
	border-right: 1px solid #ede;
	padding-right:25px;
	}
	
#branding h3 {
	 background: url(../bilder/startseite/branding.jpg) no-repeat;
	 width:200px; height:50px;
	 text-indent: -99999px;
	 top: 0px;
	 left:-15px;
	 position: relative;
	 }
	 
#branding p {
	font-family: Arial;
	font-size: 11px;
	color: #333;
	font-weight:normal;
	margin: 25px 0 0 -5px;
	}