/*
 * globale Angaben
 */

*
{
	margin:					0;
	padding:				0;
}

body
{
	background:				#FFF;
	color:					#000;
	margin:					0;
	padding:				0;
}

a
{
	color:					#000;
	text-decoration:		none;
}

a:hover
{
	text-decoration:		underline;
}

a.highlight
{
	font-weight:			bold;
	text-transform:			uppercase;
}

a img
{
	border:					none;
}

h1
{
	font:					bold 13px/17px Verdana;
	margin:					0 0 17px 0;
}

p
{
	font:					normal 13px/17px Verdana;
	margin:					0 0 17px 0;
}

p small
{
	font:					normal 11px/16px Verdana;
}


/*
 * Rahmen der Webseite
 */

#page
{
	height:					630px;
	margin:					15px auto 0 auto;
	overflow:				hidden;
	position:				relative;
	text-align:				left;
	width:					880px;
}





/*
 * Logo
 */

#logo
{
	height:					93px;
	left:					2px;
	position:				relative;
	top:					0;
	width:					101px;
}

#logo a
{
	text-decoration:		none;
}

#logo img
{
	border:					none;
	height:					93px;
	width:					101px;
}


/*
 * Navigation
 */

#navi
{
	background:				#000;
	border:					1px solid #FFF;
	display:				block;
	height:					18px;
	left:					110px;
	list-style-type:		none;
	position:				absolute;
	top:					31px;
	width:					761px;
	z-index:				10;
}

#navi li
{
	border-bottom:			1px solid #FFF;
	border-top:				1px solid #FFF;
	display:				block;
	float:					left;
	height:					14px;
	list-style-type:		none;
	margin:					-1px 20px 0 0;
	padding:				2px 6px;
	text-align:				center;
	z-index:				20;
}

#navi li:first-child
{
	margin-left:			40px;
}

#navi li a
{
	color:					#FFF;
	display:				block;
	font:					normal 13px/13px Verdana;
	padding-bottom:			1px;
	text-decoration:		none;
}

#navi li.active,
#navi li:hover
{
	background:				#FFF;
	border-bottom:			1px solid #000;
	border-top:				1px solid #000;
}

#navi li.active a,
#navi li:hover a
{
	background:				#FFF;
	color:					#000;
}




/*
 * Textbereich
 */

#text
{
	left:					110px;
	position:				absolute;
	top:					110px;
	width:					300px;
}


/*
 * Portrait
 */

#portrait
{
	height:					198px;
	left:					470px;
	position:				absolute;
	top:					110px;
	width:					199px;	
}



/*
 * Arbeitsproben
 */

#works
{
	display:				block;
	left:					110px;
	list-style-type:		none;
	position:				absolute;
	top:					106px;
	width:					761px;
}

#works li
{
	display:				block;
	float:					left;
	list-style-type:		none;
	margin:					0 5px 0 0;
}

#works li a
{
	border:					1px solid #000;
	display:				block;
	height:					26px;
	text-decoration:		none;
	width:					38px;
}

#works li.tele5 a
{
	background:				url('../images/work_tele5.preview.png') 0 0 no-repeat;
}

#works li.se a
{
	background:				url('../images/work_se.preview.png') 0 0 no-repeat;
}

#works li.comcom a
{
	background:				url('../images/work_comcom.preview.png') 0 0 no-repeat;
}

#works li.command a
{
	background:				url('../images/work_command.preview.png') 0 0 no-repeat;
}

#works li.bmw a
{
	background:				url('../images/work_bmw.preview.png') 0 0 no-repeat;
}

#works li.arabella a
{
	background:				url('../images/work_arabella.preview.png') 0 0 no-repeat;
}

#works li.hotdog a
{
	background:				url('../images/work_hotdog.preview.png') 0 0 no-repeat;
}

#works li.edvertise a
{
	background:				url('../images/work_edvertise.preview.png') 0 0 no-repeat;
}

#works li.active a,
#works li:hover a
{
	background-position:	0 -26px;
}

#works li a small
{
	display:				none;
}



/*
 * Beispiel zu einer Arbeitsprobe anzeigen
 */ 

#workexample
{
	font:					normal 13px/17px Verdana;
	height:					486px;
	left:					110px;
	position:				absolute;
	top:					150px;
	width:					651px;
}

#workexample img
{
	height:					460px;
	width:					651px;
}